I've been getting started with Angular JS and using it as a front-end to integrate
with a Play Framework POC. I've already worked through the tutorial.
I cloned my front end from the seed project on github. It has an app/index.html
(which I'm using as my main page) and an app/index-async.html. What is
the point of the latter? Is it really necessary?
The two files are interchangeable, and you can use either one to build your application. index-async.html loads scripts asynchronously, which might give you a faster bootstrap time. index.html loads scripts synchronously, which is often a bit slower, but the intention is that the code is easier to understand for someone learning to use the framework.
To read more about asynchronous bootstrapping, check out the docs here: http://docs.angularjs.org/guide/bootstrap
Related
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
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
I have worked with Angular 1.x and now starting with Angular 2. Now I am overwhelmed to see the number of js scripts that we have to add to our index.html just to get started.
I mean even if I exclude angular's (and its components') own js files, there are "systemjs", "es6-shim", "reflect-metadata", "rxjs", "zone.js".
And I keep on hearing that Angular 2 is 2 to 3 times faster than Angular 1.
I have used AngularJS 1.x and also ReactJS and no where I have seen this much dependency on other scripts.
What I don't understand is this - Don't all these script files make the browsers slow? Don't they create extra load on the JS Engine of the browser?
And are we assuming that we are only targeting the latest of browsers when we are developing in angular 2 ?
Will anyone please explain?
EDIT:
I would like to understand the performance effect by lots of JavaScript files.
Can you refuse/reject the fact that Angular 2 needs a lot more JS files to start working than Angular 1?
Well having more file to load may increase the first time loading the page, and memory consumption at start (not necesseraly in then end) obviously.
But once you passed that, this is pretty much unrelated to performance.
Furthermore by using libraries that have been specially developped and optimized for their purpose, angular developers don't have to rewrite their own part of code which would probably less optimized/ morebuggy than existing and widely used ones.
Let's take a simple example : underscorejs or lodash. By including it to your browser you will probably add some time loading, but by using the functionnality that the provide, your code will be probably faster because there is a lot of trick about javascript & performance when it comes to what those libraries are used for.
And it's not because you load those libraries that you will get their full code executed on each javascript loops, same goes for angularJS2 and all his libraries.
The most annoying thing about this could be the need, not only to learn angularJS2, but some of the others components to get things rights about how to code properly with angularJS2, increasing the learning curve so.
Among the file you showed : es6-shim is to make angularJS2 compatible for no-es6 browser, you had the same when using angularJS 1.x on IE8, nothing new for this one.
The Angular team is working on a build tool (partially included already in RC) that resolves all kind of stuff before the application is delivered to the browser
script inlining
CSS inlining
CSS rewrite for ViewEncapsulation.Emulated (default)
HTML inlining
lazy loading of components depending on routes configuration
replace declarative bindings by generated code
...
During development an Angular applications has to make dozens to hundreds of HTTP requests to get all resources. After the build step these are minimized to the absolutely necessary.
I've worked with Angular for a little bit, but I keep managing to learn something new - today, I installed the angular-seed project in order to give my development a little kick in the pants. I ran into the index-async file and learned about the angular-loader - which I hadn't used before.
I found this question, as well: What is angular-loader.js for?
It looks as though the index-async file is using a script loader in addition to the angular module loader, which makes sense. However, I've never used this method before. (In my company, we've used RequireJS to load angular modules before, and so I can understand why something like this would be easier and less cumbersome.) Yet, it also seems that I could use the loader without a third-party script loader - I could just include all of my app files, in any order, before the loader is called, without having to worry about the dependencies.
In short - when should I use angular-loader? More importantly, is there any reason NOT to use it all the time?
Well, you don't have to use it if you don't need it.
From the Angular Docs, you use it:
If you are loading multiple script files containing Angular modules, you can load them asynchronously and in any order as long as you load this file first. Often the contents of this file are copy&pasted into the index.html to avoid even the initial request to angular-loader.min.js. See angular-seed for an example of usage.
The reason behind is to optimize the loading time on the client-side - only load the currently needed module for the user, particularly if you have a reasonably huge app.
Im just in the middle of refactoring my javascript into a modular fashion using requireJS.
I have finished and my project structure looks sweet dont get me wrong. But now publishing the app up to windows azure it now runs like a dog. Pages pop up quick but they clunk quite a bit as the dependencies on the requirejs modules come in and take effect.
Am I doing something wrong? I thought this would smooth out the loading of everything.
Has anyone come across this dilemma where they wanted modular fashioned javascript and tried to accomplish this with requireJs and got a bad result?
Thanks in advance
What do you mean by a bad result? Has the initial page load time reduced drastically after implementing require js? If so, do you understand why it has happened?
What I mean is, without minification/concatenation having played any part in the reduction of load time, the initial page load time reduces as you might be making a request for only one js file, the require js loader and the main.js ... all your other dependencies that were loaded before dom ready are now being loaded on first use after dom ready.
You may want to read http://requirejs.org/docs/optimization.html for a way to minify/concatenate the files.
EDIT: if all you want is modular js, you can simply use something like the Revealing Module Pattern, RequireJS helps with the dependency management. Without RequireJS you would have to manually ensure that all your dependencies are loaded before you module code executes.