Do I need node.js to use Angularjs? - javascript

I would like to use angular.js for my Image Editing Tool in my website. Do I need node.js also?
I don't understand the scenario. If I don't need it, then when do we use both nodejs and angularjs together?

I feel your pain.
For someone new to Angular 2 development, I can feel the pain of having to learn server side technologies for something that is essentially a client side technology. From what I understand:
node.js is only used to manage the dependencies of an angular 2 application. If you can somehow manage to get those dependencies without using node.js, npm or jspm then you can run and develop your application offline. However, doing it manually will take an inexorable amount of time since you have to download files manually which may have other dependencies which will require other files to be downloaded again (yes I've been there). node.js or npm or jspm for that matter automates this process as well as taking all the necessary steps of configuring the files (jspm) so that whenever you use a particular dependency in your application, that particular dependency's other dependency will also be present in your system.
Some browsers, particularly Google Chrome restricts files loaded locally for security purposes so that certain HTML 5 technologies used by Angular 2 will produce an error when loaded using the file: protocol. So you need a server from which you can serve your application so that all the available HTML 5 technologies is available for Angular 2 to run.
node.js is also needed for the hot-module-reload capability for rapid application development since it provides a file watcher api to detect changes to source code.
But there is a way to develop Angular 2 application offline without node.js.
Remember when I said that if you can manage to get all the required dependencies, you can run and develop your application offline? If you can somehow find or create a package that has all the required dependencies your application will need, then you do not need npm or jspm to manage the dependencies for you.
For the file-access-restriction problem, you can load your project as an extension. Extensions have the ability to use all the available HTML 5 technologies as well as some powerful api's (not available even to applications served on a server), while at the same time being local to your development environment. So you do not need to fire a web server to access HTML 5 technologies if you serve your application as an extension.
For the hot-module-reload capability, you can approach it from the other way. Instead of having a file watcher in the web server to monitor changes to files in the local system, you can do it from the application itself. Since the application can fetch or xmlhttprequest resources that are needed by the application, you can periodically fetch or xmlhttprequest the resources your application needs and compare it to some cache. But how do you know which files to check? You can look for links within the page, script, of img. If you use SystemJS as the module loader, then you can use its registry to look for the files needed by your application but not loaded in the page, since it has been transpiled or something. While doing all this can be a performance drain to your system along with the added overhead of transpiling or preprocessing non-native code, this job can be outsourced to a web worker which will free up the main execution thread in the system for your application code.
Don't believe me? Here's proof.
The Angular in Chrome project on github contains a zipped package which contains the required dependencies needed to develop a minimal Angular 2 application (by minimal, I am referring to the Tour of Heroes tutorial referred on the quickstart page). So that if you are on a system not supported by node.js (yes there are, ChromeOS for instance) or just on a restricted system in which node.js just isn't available, all the required dependencies are available and you do not need npm or jspm to manage the required dependencies for you.
There is a proof of concept extension which serves the tour of heroes tutorial (the development files, typescript and all) locally as a chrome extension.
The extension also implements a hot-module-reload functionality by hooking into the hmr-primitives developed by alexis vincent for SystemJS. The hot-module-reload functionality is enabled by a single javascript file so that if this functionality is not needed or is taking up too much resources, then you can just remove the offending line of code.
But be warned though.
If you are using this system, then you need a way to update your development package as technology moves forward and it moves at a rapid pace (what with talk of Angular 3 when Angular 2 has just been released) or the technologies that you are using to develop your application may become obsolete or that somewhere along the line an api change may prevent your application from being functional in the future. You are also not guaranteed to have up-to-date repositories for the dependencies since these types of packages are maintained manually.
Bundling your application as a Chrome extension like in Angular in Chrome will introduce performance bottlenecks. Since code is transpiled and modules are lazy loaded, you lose the advances of JIT compilation and other performance enhancements that modern javascript engines use to optimize code run on the browser. However, what you lose in performance, you gain the flexibility to use the technology that you prefer to develop in. There is always a tradeoff. Moreover, the performance hit is only at the beginning as code is loaded. Once it has been loaded by the application, then the system will know how to implement the performance enhancements. When you distribute your application, you really need to compile the needed resources to take advantage of the performance enhancements of modern javascript engines.
The hot-module-reload capability is currently a hackish way of implementing a file watcher which uses common conventions for a project (temp1.ts, temp1.css, temp1.htm) since there is no way (I might be wrong on this) to get a definitive list of all the resources needed by the application but not loaded on the main page (the transpiled or pre-processed resources).

You don't need NodeJS for creating a client side image editing tool.
AngularJS is a web application framework, maintained by Google and the community, that assists with creating single-page applications, which consist of one HTML page with CSS and JavaScript on the client side.
But if someday you will want to upload and store those images on a server and make them accessible by multiple clients - then yes you will also need a server. This server could be made with NodeJS.

node.js is used to write Javascript on the server side.
angular.js is a client side framework.
You don't need node.js to use angular.js but, you can install npm (node package manager) to use some awesome tools that will make your life as an angular developer much easier.
For example: yoeman which is a great scaffolding tool.
There are many other tools available on npm here is a link to their site
Learn more about angular at the official angular website or at the angular youtube channel

No. Angular is used at the client side and Node for the server side.
They use to go together as the MEAN Stack but it's not necessary.

You don't need Node.JS for AngularJS to work. NodeJS is server side, AngularJS is client side.
If you are new to AngularJS, I'd suggest this tutorial AngularJS tutorial.
In the tutorial you will use NodeJS, you will understand why the two work together, but are not necessary.

It's hard to answer without knowing how your Imaging editing tool works. But to answer your question, no you do not need Node.js to use AngularJS.
Angular is a front-end javascript framework which operates in the clients web browser.
Node is a service which can execute javascript and is often used on a server maybe in replacement of PHP (like in MEAN stack).
Also, because Node is a service which can execute javascript it can be used in your local computer when developing Angular applications to do background tasks such as minifying css and javascript and performing tests.
So if your Imaging editing tool is developed in javascript and your application used Angular and Node (as a web server), the code could be executed on either client side or server side.
Have a read on MEAN stack to see where Node and Angular fit in. You don't even need Node at all but it's nice to develop all in the same language.

Reason for installing NodeJs
As a web browser such as Chrome, Firefox etc. understands only JavaScript, we have to transpile our Typescript to JavaScript. Therefore, the Typescript transpiler requires Node.js for generating the Typescript code to JavaScript.

Related

How to load web applications on runtime?

I'm going through the concept of Micro frontends for the past few days. In Micro frontends, we create bundles of all applications wherein each bundle represents a separate web application and finally we write logic to communicate with these bundles in our base application.
For e.g., let's say we have APP 1, APP 2, and APP 3 are our Micro frontends which we bundled and used in BASE APP.
Is there any way to dynamically load these apps at runtime and without having to create a bundle of individual applications?
I'm aware that we can use iFrame but it doesn't allow cross-origin access to iFrames
Their are few things that can help with this, the best know is Single SPA, which allows you to load them all into the same page without using iFrames.
https://single-spa.js.org
If you want to use iFrames, then you will have to use the PostMessageAPI to communicate between them to get around the cross-domain issues.
There are other options, in 2019 Martin fowler wrote an overview of these that is going to be more useful than anything more I might add here.
https://martinfowler.com/articles/micro-frontends.html#IntegrationApproaches
I think this resource should be more helpful for you:
https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/
The key search term here is "Angular Module Federation", which was introduced I think in version 11 for this particular reason to be able to load Angular Modules on runtime.
I've read throug it and it's very promising to be able to built a mircofrontend like thing with angular.
Edit:
And maybe also this npm package: https://www.npmjs.com/package/#angular-architects/module-federation
Module Federation allows loading separately compiled and deployed code
(like micro frontends or plugins) into an application. This plugin makes
Module Federation work together with Angular and the CLI.

Netbeans 8.1 HTML5/JavaScript Project Types

I want to create a new HTML5/JS project in Netbeans 8.1. Here is a picture of my options:
I am struggling with getting definitions for these projects (even in Netbeans documentation). I mean there is a brief definition for these projects but that is just not enough information for a beginner.
HTML5/JS Application Creates a new HTML5/Javascript application configured for HTML, CSS and JavaScript.
Node.js Application Creates a new Node.js application configured for Node.js, HTML, CSS and JavaScript.
HTML5/JS Application with Node.js Creates a new HTML5 application configured for Node.js (possibly with Express framework), HTML, CSS and JavaScript.
JavaScript Library Creates a new JavaScript library in a standard IDE project.
1) What is an HTML5/JS application project used for?
2) What is a Node.js application project used for?
3) What is an HTML5/JS application project with Node.js used for?
4) If I want to create an HTML5/JS component that can be used in other web pages, should I use the JavaScript Library project?
Can someone please either explain the differences or point me to some helpful documentation? I've been searching for a couple of hours now and cannot find the specifics I am looking for. Just a simple explanation of why to use each of the project types I've listed above. I know what "with Existing Sources" means and that Cordova Application is for mobile apps.
Thank you in advance for helping clear up my confusion!
Here is a bit of explanation
HTML5/JS - general a client-side project without any server side code. IDE will give you a lightweight http server to run the project on it (or you can provide own server and then IDE will open configured URL in browser). It has Site root where your client side sources are placed
Node.js application - general NodeJS project. Note that NodeJS is not just for HTTP server, but it is a platform for variaty of projects (scripts, servers, etc.). The "run action" on the project will run JS file on nodejs rather than opening a web browser. It has "Sources" where your sources are placed
HTML5/JS application project with Node.js - combination of the above with both Site root and Sources. Typical usecase is ExpressJS application with server side logic (NodeJS) and client side sources. It has a run action that will run JS file on Node and could also open URL in browser.
Please note that generally speaking, the main (perhaps only) difference is in project sources configuration (Sources, Site Root) and how the project is being run (browser, NodeJS script, both). This allows users to have some kind of "project configuration template" out of the box.
But you can change all this configuration if you right click on your project and open Project Properties. There you can change basically any of these project types to a different one (from the same category in the wizard).
The "JavaScript Library" is a imho a project without any run configuration.
As for the #4, it is up to you to decide what will suite you better :) Except of JS Library and Cordova, they should all work for you and you can always change your project setting to a different ones if desired.

deploying a javascript 3rd party library (requirejs/grunt)

Our team is building a javascript library that enables other web apps in our company to consume and insert data into our app, using widgets we built with angular directives.
So we got our own app (that could be used independently), built with MVC .net (in visual studio), and with angular. And also we are producing sort of a javascript library that other apps can use and insert widgets (that are connected to data from our app through ajax calls).
We are really struggling with our deployment proccess. We need the following to happen:
Concatenating and minifyinh our javascript, and in the right order.
Compiling less, and concatenating and minifing css.
Handle external dependencies because we are using multiple 3rd party libraries also, which maybe others are using also.
We know about requirejs, but we are not sure it is suitable for a 3rd party sort of library we are building. Also we want to enable loading as CDN, is it still suitable?
We also know about grunt, but we are not using nodejs but MVC .net. Is it relevant?
We would appreciate your input! Thanks!
I would strongly recommend using a build tool such as Gulp or Grunt, both of which can easily handle the requirements you've given. An added benefit is both can be set up to initiate parts of the build process as files are saved, freeing developers to use any editor they want instead of a particular IDE.

When NOT to use MVC Bundling?

I came across a strange issue in my recent project.
I was using Trent Richardson's Timepicker control to avail time picker functionality in my MVC 4 application. I had relevant JQuery file bundled using MVC bundling feature. I found this working quite well in development environment (Visual Studio 2012).
But when I deployed the website on IIS, I started facing a strange issue, and there was a javascript error "function expected" in that particular bundle. I could see the bundle got loaded because developer tool was showing javascript code when that bundle was selected in "scripts" tab.
Finally, when I referenced the JQuery file directly instead of bundle, it started working fine on IIS. Though the problem got solved, I am now curious to know what was wrong with that particular file if bundled, and if MVC bundling was actually an issue, then why it was working well in development environment, but not in IIS?
Any lights on this much appreciated.
Minification is a complex process by making scripts/styles smaller using techniques such variable name shortening, white space elimination, comments removal, etc... It uses ASP.NET Web Optimization that depends on WebGrease for minification. Of course, there can have issues but I personnaly never noticed that.
Here are some situations, where you should not use bundling
There is only one file in your bundle. Why bundling ?
You are using only famous frameworks such as JQuery or jQuery UI. Do not redistribute scripts that are already served by someone else. Google/Microsoft/Amazon/... already provide CDN for the most popular, open-source JavaScript libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Your bundle takes only a few Bytes. Web performance Optimization suggests to limit the number of web requests. Everything has a cost. Not very optimal, but sometimes it's better to put inline scripts in your page.
In some architectures. Bundles requests contains a unique identifier used for caching. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle. When working with some architectures, JS updates can be frequent and will invalidate all your bundles.
On Dev Environment. It's is really really painful to debug a bundle.
Along with Cybermaxs' reply, I have also received following response while posted on ASP.NET Forum In case, if that helps the visitors.
What bundling suppose to do is to put together the script/stylesheet files in a single bundle into a single request and send it to the client so that the browser has to make less calls to get those required script files.
In a development environment, when you do debugging in visual studio. It doesn't do the above process unless you specify it to do so. But in a production environment, when the debug is set to false in the web.config file. it will start to do the above process.
There can be some other reasons as well. such as the script might have two versions. one for debugging and one for production. I came across such a situation with knockout. in my development enviornment I had referenced the debug version of the script. But when I put it into the production enviornment, everything came to a hault. There was a release version for the knockout script file and I had to reference that to make everything work again.

Best way to create custom build system for JavaScript, for automated builds?

How to create a build system for number of JS client applications, all using same framework but different combinations of framework parts? This would enable all client applications receive the framework updates automatically, without having to rely on one distribution file, containing all framework abilities (which would be rather sub-optimal).
In best case scenario, the client applications would use the only specific parts (raw, non-minimized files) from the framework project, while when deployed, the application would have only one script containing only the needed functionalities of the framework. Also, if(/when) all this can't be done automatically, there should be only one "makefile" that would be used for both, loading single files in development and building the single JS file for deployment.
GWT does what you are requesting through a feature called deferred binding.
http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsDeferred.html
THE GWT compiler generates many versions of code at compile time,
versions are created automatically per browser type, and it's possible to extend this functionality to other parameters such as user localization preferences or completely arbitrary parameters.
I finally managed to do this with combination of custom buildfiles, custom runtime build system done in PHP, sophisticated JavaScript non-coupling framework and massive Ant build scripts, doing the compiling and deployment. :P

Categories