i'm using Vue.js in a Website and added the templates in the html Code and the js-Code in a single js-file.
So i do not want to use the *.vue <-> Vuefy/Browserfy approach but bundle and minify my js-files later.
As i have to use Asp.Net MVC i could use split the single Html-file in a view and insert the vue-div-elements hierarchically structured with #Render.Partial(...).
This way i could do a clean separation and use the same system like the *.vue files.
Would this be a good practice?
Do you think it would be better to write the html and new Vue({}) in every partial .cshtml or just write the html code there and put the javascript into (a) js-file(s).
The js-code in script-tags could not be bundled and i don't like that much inline Code but it would a nice coupling of the components code.
By using multiple js-files i could store then in the views folder next to their partial partners and bundle them together with the VS Extension Bundler and Minifier.
Are these thoughts usefull or is there still a good aproach for using vuejs templates in asp.net?
EDIT: I used to write some of the partial views with a specific Preifx. The include inline script tags, wich comes the .vue approach very close and is cool in small components because its all in one page. The inline script is conditional with Razor, so only in the dev build it gets rendered inline, for production it get's send separated. To do so I wrote a powershell script and execute it as pre-build event to exctract all the inline code into a js-file.
This file get's bundled with the other js-files and is served minified for production. So i can use all the Razor features in the html/templates and other pages of the project are just *.cshtml views.
For only-one-SPA-sites the approach mentioned by iknowitwasyoufredo sounds better.
If you use vue.js to do some simple js tasks, instead of jquery I think it is good.
But if you want to have a single page application, routing, two way binding etc. mixing asp.net mvc views with vue.js is not a good idea. Eventually, you will face many problems.
It's an architectural decision but you could implement web api services with dotnet, and use this services from a node.js application (express, webpack, vue.js).
Related
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
Doing translation in JavaScript in Django apps is covered in the documentation quite well. However, the built-in Django way is to load a JS file in a <script>. Of course, they suggest to cache this, but one either needs to use etags or another mechanism and it will normally add at least one more request to the page load.
However, most decent websites already have a build system for preparing static files, i.e. using gulp - for compiling SCSS, sprites and whatnot. This is the perfect place to build a JS translation catalog, concatenate it with the rest of the JS and make 1 single bundled JS file. There doesn't seem to be way to generate a static JS file from the current *.mo files. Reading through the Django code, it seems that the JavaScriptCatalog view is responsible for generating that JS code and it's not easily reusable for that purpose either.
TL;DR Is there an easy way to generate a static .js file with the current translation catalog in a fashion similar to using the built-in JavaScriptCatalog?
Take a look at https://github.com/zyegfryed/django-statici18n which I think does what you're asking for. Note however, that there will be one javascript catalog file per supported language, and you must serve only one of them to the browser. So to make "1 single bundled JS file" means making one bundled file per language.
I have a ASP.NET MVC project which adopts lots of JavaScript (jQuery and d3). I am new to web development, so I want to ask for some help on how to organize front end script code.
My current way is, each folder under 'Views', has only one corresponding .js file (which means all partial views (.cshtml) under that folder, share that .js file), and I explicitly initialize all .js files of my project in $(document).ready() of _Layout.cshtml.
This introduces 2 issues:
Because all partial views puts there codes in one .js file, so it makes each .js file huge and complex.
Because I hardcoded initialize all .js files when _Layout.cshtml is loaded, so even when one view is not loaded, its behind .js is executed, sounds not flexible.
So here are my questions:
How to make each partial view has its own .js file (split current .js into small pieces).
How can I load and run a partial view's .js file only when that partial view is loaded.
If I use TypeScript and KnockoutJS, do they provide any benefits on organizing front end script code?
Thanks in advance.
Split up your javascript code into multiple file such that each js file corresponds to the partial views.
Then load the corresponding js in partial view in partial view instead _Layout.cshtml file. In this way, the corresponding js will execute only when the partial view is loaded.
TypeScript is a class-based object-oriented programming style applied to basic javascript, which is developed and maintained by Microsoft. This does not help to organized the files but do help to maintain the js code in an OOP style.(link here)
KnockoutJS is Model-View-ViewModel(MVVM) pattern applied to javascript. You can modularized each js files in KnockoutJS, ie, separate js for Model, View and ViewModel but they will have dependency each other.(see documentaion)
There are multiple ways to skin a cat. If you have javascript code specific to a partial view it's entirely fine to just skip the step of including a file and embedding JavaScript directly in there by means of the <script> tag. This solves problem 1 and 2 you posted because razor partial views boil down to just arbitrary HTML inserted into the DOM when they are loaded.
As for TypeScript and KnockoutJS the benefits they provide are highly subjective to yourself and the project you are working on. I would suggest reading up on the features they provide and see if that's an avenue you want to pursue -- There is no right or wrong answer to this, at least not with a lot of specific context as to what you're working on.
So my question is mainly about the use case of RequireJS.
I read a lot about pure javascript driven web pages. Currently I extend single rendered views (e.g. provided by a PHP Framework) with AngularJS which adds a lot of value.
Sadly the dependency management gets harder and harder with every <script> tag on other 'single pages'. Even more when there is a main.js file which provides common libraries (e.g. jQuery and AngularJS itself).
I thought this doesn't fit into RequireJS philosophy to have one main file which requires all dependencies.
A good example would be an administration panel which uses some modules (defined by AngularJS's dependencies).
Example:
scripts/
adminpanel/
panel.app.js
panel.filters.js
panel.directives.js
antoherModule/
andAntoherModule/
require.js
tl;dr
When you use AngularJS to extend single pages, instead of building a completely javascript driven web application, is it good practice to use RequireJS for AMD loading modules which will be used on the single page ? And how is the best way to do it so ?
SPA usually means that the page doesn't refresh and all extra content is loaded on the fly. In essence the entire app is a single page. It doesn't mean that all of the content is loaded on the initial load (though if it is small enough, this could be the case). Using RequireJS / AMD architecture is really good for this kind of thing.
As the user navigates throughout the site, different partials / templates are retrieved as well as any supporting JavaScript.
The best way to do this is with define. Defining all of the requirements your script needs in order to work. All of the scripts needed will be loaded before the function is run, ensuring that you have everything you need. Furthermore, the items that you define as requirements can have their own define to specify the scripts they need... and so on.
I'm faced with a dilemma. I started a project using Backbone.js and have many many JS files (views, models, controllers, templates, collections), but I didn't want to have to load them each using the script element in my HTML file.
My idea was to load one file (bootstrap.js) and within that, load all the required JavaScript files for my web app (minus 3rd party libraries, which will get loaded using <script> before bootstrap.js).
Would using the jquery getScript function work to load all the JS files from within bootstrap.js? What's best practice? I just don't want to have like 20-30 <script></script> lines in my HTML file when I don't need to - just trying to keep it nice and clean.
You should concatenate them all before deploying. You can also run YUI Compressor on them for speed and size optimizations.
But my favourite way is keep them separate during development, and 1 big file before deploying. Some server-side script will make this easy.