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
Related
I work with AngularJS for several months, but I am still confused at the point: Is it good to include all JavaScript and CSS files in the main page the AngularJS way?
In my opinion, it may cause many conflicts when using many CSS and JS plugins. Also, the web browser loads too many files that may not be used on a specific page. Does this way cause some performance problem?
Does this way cause some performance problem?
AngularJS creed is based on single-page application:
A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load.
Of course it may cost more in terms of performance at the launch of the application, but it will more fluid/user friendly after.
In my opinion, it may cause many conflicts when i use many css, js
plugins file...
It should not create conflicts. But you have to be carefull when naming your CSS classes, JS files. A convenient way not to override CSS classes is to set prefixes on your classes: CSS classes for view 1 may have a prefix v1-*, classes used throughout the application do not need a prefix. This way you will know which CSS stand for (global or specific for a view). Also think about separate your CSS / JS in different files. Divide and conquer
I would suggest you to use standards (here is a very blog for AngularJS guidelines).
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
For performance efficiency, is there a way to not include scripts for certain pages? I am currently using Ruby, specifically Shopify's application and on some pages, it isn't necessary to have scripts of jQuery as there are no functionalities that require them. From my understanding, the template page is given to every page which includes the scripts. Is there a way to disable them for certain pages?
U can use form sections in template and such sections can be filled from views that use those templates. Populating from each view can be a workaround. If not use a different layout all together.
You could use an amd loader like require.js or browserify to load in the scripts on the pages you need them. However, it's generally better practice to load all the scripts you need for your entire site in one hit, to reduce lots of http requests. That is better for performance because once the script has downloaded for page X, page Y will just load it from the client browsers cache anyway. It depends on how big your site is, but generally you create the site on the premise and hope that people will visit most of your pages.
I want to develop multiple page applications.Is it needed to load all the scripts and css file in each html file?
or We need to manage it in single index file itself ?
Do we need to write all pages in single index.html file using separate div with data-role="page" or we can create multiple html file for each page?
Yes phonegap has single page model, single page is good option over multiple page application with phonegap.But you can create it on both ways if you are going with multiple page application and having multiple html pages then also it's not required to load all the css and js stuff in every html pages you can declare it once and then you can use that js and css in all other pages as well.
Multi-Page Apps
Multi-page applications function more like traditional web pages. Each “page” or HTML file contains a finite and discrete set of functionality, and has limited client-side dynamic updates. A page is loaded, content is displayed, the user interacts with it, and then another page is loaded. These pages can be loaded from the local file system or from remote servers. This style of architecture works for many developers, however there are three notable drawbacks to this approach.
First, there is the transition between pages. Not only are there visual display artifacts when pages are loaded and unloaded, but you also lose anything in-memory in JavaScript. This includes framework libraries, collected data, and so on.
Single Page Apps
This approach enables you to create web apps that feel more like apps instead of web pages. Once the PhoneGap js library has been initialized, you never have to re-initialize it. By leveraging the single-page architecture, you will not lose data that is resident in memory, and you can manage the transition of content from one visual state to another. Many MVC/development frameworks leverage this approach for building applications. However, if you are leveraging the web view’s history management, then you have to manually manage URL fragments and history behaviors.
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.