I have an application with multiple Backbone models / views. I'm running into an issue where the application tries to load all of the scripts on every page, however I only need them to load on specific pages.
What is the correct way to address this? Should I use a router?
First you have to organize your application code into small modules (require.js). Here is a brief introduction Organize your backbone application using modules. Load only modules that are required in current page. For details about requirejs requirejs.
You can use routers in combination to decide which modules of your application to load.
Related
I've created a website using Laravel+VueJs.
And there is a little issue in my understanding about which architecture of routing is better to use.
Now this app has the following structure:
Routing system is provided by Laravel;
Javascript files that include VueJs framework are divided into files for each html page (e.g: products page loads products.js from public/js folder and so on... )
That system works fine, each web page is loading lib.js file which contains every library or frameworks needed for frontend. It has around 700KB when minified by the webpack. Then we have smaller javascript files (2-3 KB each) for each web page. In general, each page loads 2-3 javascript files.
In conclusion, I wanted to know if it is a good architecture and whether should I consider to use it in the future or should I use a different type of structure. If it's not a good option, then which would be the best choise and what technology / plugin should I use?
if you app is going to be SPA I advice you to :
use laravel routing for API
use vue-router for your application
navigation
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
Javascript frameworks like AnguarJs, BackboneJs, Emberjs that use to develop Single Page Applicaitons(SPA's) load lots of js files. Since these files cannot be unloaded can a application go into a situation that cause memory issues because of these js files because SPA's usually doesn't refresh the page.
For an example if application have multiple modules( eg : payroll, attendance,.. of a ERP ) SPA load js files specific to that module to browser when it get loaded. But when navigated to different module without refreshing the page previously loaded js files remain in memory. Imagining application has lots of modules like this is it possible in a certain time these js files cause memory problem ( not enough memory or corruption) ?
Keep in mind that you don't need to use a framework to create a SPA. It is true that at times Angular, React and other frameworks do create bloated code, but they also provide many useful functionality. So depending on the project you may or may not use them.
You can also load your code as modules, and load the modules when needed and unload them when you don't need them. So there is more to SPA's than just using a framework.
Things to remember before developing a Single Page Application
Try to use minified versions of JS and css files
Never use Single page approach if you are developing a large
application because when all html is renderd in single page then the
web application get heavier
So, I have been developing a very large AngularJS app wherein there are many smaller, modular applications (such as a module to look up user profiles, a module to parse and view an RSS feed, a module to view a complex map, etc).
Currently, there is a core framework being loaded in as well as dependencies (such as AngularJS) and a base definition of each module, its routes and its dependencies. When a route is accessed, I use RequireJS to load the module's dependencies, including the controller and services that route needs.
As the user navigates through the applications, more and more javascript gets loaded, making the app get slower. This is especially noticeable when the user accesses a complicated module, such as the maps module.
Also, I've noticed that if I load a view, load data into the view, scroll through the data, then leave the module and come back to it, the view is unchanged (the data is still there and the scroll position remains).
I seem to be able to load resources "on demand" but I can not find a way to unload them. Is there any way to unload views/controllers/services when they are no longer needed in an AngularJS app?
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.