I don't have experience in front-end but I want to create a simple app using Angular 2.
Why do I need to install Node.js as a prerequisite step? Why does Angular use Node.js?
There are a couple of things that Angular uses Node.js for:
Installing and managing packages. From the Quickstart tutorial:
Angular application developers rely on the npm package manager to install the libraries and packages their apps require. The Angular team recommends the starter-set of packages specified in the dependencies and devDependencies sections.
Compiling the TypeScript used into JavaScript that the browser understands - browsers can't process TypeScript natively and the SystemJS imports used in your code aren't supported in browsers yet:
We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase before running the application for several reasons including:
We see compiler warnings and errors that are hidden from us in the browser.
Precompilation simplifies the module loading process and it's much easier to diagnose problems when this is a separate, external step.
Precompilation means a faster user experience because the browser doesn't waste time compiling.
We iterate development faster because we only recompile changed files. We notice the difference as soon as the app grows beyond a handful of files.
Precompilation fits into a continuous integration process of build, test, deploy.
node.js is required in order to install the library using the node package manager (npm).
It is not required to run an app using angular2, only to build it.
For any modern JS based application, as the complexity grows, the app becomes difficult to manage.
In order to make developing and managing complex applications simpler, there are frameworks such as Angular, React etc. and they provide number of tools for the same.
These tools are linting, scaffolding, running unit test cases, starting web server for local development, minify and creating build for the production use etc.
These tools are based on NodeJS as it is JavaScript only and therefore can be customize as per developers needs.
And that's the reason you need Node.js for Angular2 development.
Related
What is the need for bundle.js for Node.js/Angular/React applications? What if its not used while building and deploying the application?
Where bundling comes from?
We started bundling our assets because of performance reasons.
HTTP1 supports limited requests on a single connection. Creating connections for each asset was killing the performance.
We started bundling things page by page to increase performance with more effective caching.
We were able to add the fingerprint to it and upload it to a CDN. (home-page.231434.js). So we were able to deploy our application by dockerizing it.
Bundling also helps us reduce the page size more because the bundler knows the full system. This means it can remove unused things and minify things easier. You can't do it without a bundler easily.
Also, bundlers are using transpilers. Browsers can't always be able to run the codes that we write like Typescript, and CoffeeScript. Bundlers can transpile these codes easily into bundles.
Do we still need it?
Nowadays things are changed a lot about bundling our assets.
First of all, almost every browser now supports HTTP/2. So we can request multiple files on the same connection. Bundling is not needed because of this anymore. Also, we have http/2 server push.
Libraries like React, Angular, and Vue are a lot more effective in size. They can be easily downloaded to a page from a gzip supporting source.
These are the reasons we don't need bundling anymore.
But based on your project we may still need bundling. This is the real truth.
I would still go with bundling.
In my company, we are using a container orchestration system to control our dockerized applications. We may run more than a version same time. Creating fingerprints for files while bundling and uploading them to CDN is still more effective for us. And also we are trying to get use of prefetching and preloading. CDN helps us reduce the loading times of other country visitors.
And also we are getting support from the service worker to change assets when we need it by page.
So actually nowadays it is just based on your project. There are not many performance reasons anymore.
how to create bundle.js
Nowadays,we usually use pack tools like webpack to pack js、css or other files.With proper loaders, webpack will pack the files into many bundle files and the browser will understand them.
the need for bundle.js
The module bundler will analysis the project ,find the dependency relationship and only fetch the necessary package when loading the web page.
And with module bundler, it will compiler some lanuages that browser can't read, like typescript 、less and so on.
What if its not used
Module bundler is not necessary for web project, but it will improving the performance of web pages.If not using the module bundler, web can't only fetch necessary bundle when loading.So the loading time will be longer.
I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.
I have an Angular 5 library that I expose as a package for other apps to consume from their node_modules.
Currently, the app is Just-in-Time(JIT) compiled using rollup and gulp and exported as a package. So developer applications use my package in their JIT compiled form.
Researching about AOT has led me to believe that any Angular app which when AOT compiled is much more performant than its JIT counterpart on the browser. However, as a library developer, I would like to know if app developers will get any performance benefit if I were to expose my library AOT compiled?
I use ng-bootstrap and a lot of other open-source libraries to create components in my module and add custom styling or functionalities on top of them. Do all the libraries I consume in my module also need to be in their AOT forms or I could use their JIT counterparts?
Also, I think it would be a good idea to have separate packages for my library - packageName and packageName-aot so that the users have an option to choose whichever library they want to use.
Apart from the entire code refactoring(changing the private variables used in the template to public, removing arrow functions, lambda expressions etc.), is there anything else I need to keep in mind before exposing my library modules in AOT form?
I cannot use the Angular CLI due to certain constraints, so will have to depend on #ngtools/webpack to get AOT compilation if any.
Currently, my tsconfig.json has the following options:
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMedtadataEmit": true,
"fullTemplateTypeCheck": true
}
I have searched a lot on the internet, but the Angular AOT docs are pretty vague and are not very clear for what I have been trying to do here. Any sort of direction would be really helpful.
Thanks!
The library you write, and the libraries your library depends on, need to be AOT capable. That’s really all there is to it.
You do not write, and deliver, a library that is AOT compiled (AOT compiled form, as you put it); the consuming applications will do the AOT compiling at build time.
All you must do is make sure that when a consuming application does an AOT build (ng build --prod if using the Angular CLI), that your library plays nice. By plays nice I mean, your library can AOT compile with the consuming app without blowing errors.
Library tools like generator-angular2-library, or ng-packagr (which is a tool the #angular/cli 6.0.0 uses to support building libraries) just build packages to JavaScript, nothing more.
It is up to the consuming application's build tool to do an AOT build. This is what allows a library to be used by any application (or application framework/library) that needs it. Try not to overthink what it takes to build/deploy a library. The heavy lifting of AOT is up to the application that uses it.
I have very basic questions on NodeJS apps;
When someone says a NodeJS app, does it refer to a pure server-side written NodeJS app ? I mean nowadays, when projects (say Angular, Ember, etc) use Node to install dependencies, can those client-side apps (which run in browser) be also called NodeJS app ? Or are these just NPM using apps ?
The unit-testing frameworks like Mocha, Jasmine, etc be used for both the types of apps I described above ? Or is it meant only for server-side NodeJS app ?
does it refer to a pure server-side written NodeJS app?
Yes. Specifically it refers to apps that have nodejs backend/server.
can those client-side apps (which run in browser) be also called NodeJS app?
It depends. Certain libraries that depend on browser api (e.g navigator, window, etc) will not work. This is because those browser objects will not exists in nodejs environment. For example, jQuery will not work fully in nodejs as certain functions to do with DOM manipulation depends on the browser api. On the other hand. React can be used in both browser and nodejs because it has APIs which are compatible in both browser and nodejs environment.
Previously, if we want to use a library (e.g jQuery) we'd have to attach a corresponding script tag that points to the source. Now, you can use npm to download the library code into the node_modules folder and use it from there using require or ES6 import. But, you probably have to do some preprocessing first such as bundling your code using Browserify and Gulp. You might want to look a tutorial on how to do that here.
The unit-testing frameworks like Mocha, Jasmine, etc be used for both the types of apps I described above ? Or is it meant only for server-side NodeJS app ?
Mocha, jasmine, chai does not depend on browser or nodejs specific features so they all should work in both platforms. As for the others, you have to check if they depend on browser or nodejs specific features. If they do, the library might work in one platform (e.g browser) but not the other.
"Node.js" is a server-side "JavaScript" platform. That means in a NodeJS app we replaces the typical server side languages like PHP, Ruby, etc.. with the JavaScript. When it comes to frontened we have been using Javascript and its libraries like JQuery for a very long time to add behavior to our apps. But after the recent boom of SPA(Single Page Applications) we can see lots of frameworks like Angular, Ember built on JavaScript to make SPA easier.
NPM is a package manager for JavaScript which itself uses Node to perform its operations. Using NPM we can bring many JavaScript packages (that includes all the client side JS libraries) to our project. But that does not mean your's is Nodejs app if you are using NPM to install AngularJs for your ASP.net application. It is like we need Ruby gems to install SASS preprocessor.
That's the beauty of a pure JavaScript(NodeJS) app. We can use the testing framework in both ends. Moreover that a developer can avoid mental switching between different syntax of the two languages, and even we can reuse some code/logic in both server and client side.
npm is a package manager for javascript. Using npm to import and manage packages for your application does not make it a Node.js app.
There is no such "Node.js apps". Applications refer to the front-end/client side.
You can choose Node.js or whatever on your back-end/server side, independently from your front-end.
I hope I have clarified a bit :-)
So to preface my question, I'm coming from a Java back-end developer perspective, where we use Maven to build. I have worked on testing on a server-side Node project we recently developed, but now I'm moving on to setting up testing on our front-end JavaScript client. I'm not very well-versed in front-end development and this is really my first foray into that.
All that being said, I'm thinking I'm going to use the following technology stack for our front-end testing: Eclipse IDE, Maven build process, Mocha testing framework, Chai assertion framework, Nock HTTP mocking framework, Sinon mocking/spying/stubbing framework, Rewire dependency injection framework. That all should be fine, and since that's the stack we use for our Node project, I would like to keep the front-end setup as similar as possible.
So, this is where my knowledge breaks down, though. I cannot seem to understand the difference in dependency management between our Node project and our front-end JavaScript project. I cannot see why I would not continue to use NPM, integrated into our Maven build, to handle dependency management and installation.
I see many people advocating Bower, but after looking at its page and docs, I still am not seeing what niche it fills that NPM would not. I am seeing a lot of adamant rejection of NPM insofar as browser dependency management goes; the main reasoning being that NPM is designed for server-side Node projects, and not for the front-end space. But who cares? Regardless of its initial design's intentions, if it does what I need it to do, where is the downside?
Please approach this "question" as if I am a complete newbie. I have realized as I've gone through this process and research, that I have very large dearths of knowledge in regards to the front-end side of things. With that being said, be as specific and thorough as possible in your answers, please. I would be happy to share project configuration and such, as needed, in order to help paint a picture of the space I'm in. Thanks for any feedback!
Bower and NPM do work differently.
NPM is very powerful and great at what it does. However, you won't find many client-side packages in there; most of them are there because they work in Node too. (For example, Underscore.JS and the JADE template engine.)
That's why you have Bower, which has the majority of the client-side packages. It has many jQuery plugins, templating engines, CSS frameworks, etc. Don't expect to find such packages in NPM.
You can work fine with both. I do so. :)
Traditionally, many web development projects combined npm and Bower. npm was used to manage back-end dependencies, while Bower was used for front-end dependencies. In fact, you needed to use npm in order to install Bower in the first place.
Although Bower’s advantages were compelling, they are now provided by other tools, namely npm, Yarn and webpack. While the open source project is still maintained, its creators decided to deprecate it, and advise how to migrate to other solutions—namely Yarn and webpack.
more explanation