I'm currently learning Angular2 and went through the quickstart and heroes tutorial. I'm always starting these apps with "npm start".
I've created a backend application in ruby on rails, and also have a frontend angular2 app. I do not know how I can integrate the angular2 app within the rails app. Theoretically, I can just put it into the public/ directory to make the JS accessible, but I probably need to convert it somehow so that the links are setup right.
Can anyone tell me how this is done normally?
Thanks a lot
You can do this in two ways as I can see
1 - Add your angular project folder to app/assets/javascripts or in the root in you app and set rails asset pipeline to use it. read more here (for angular1) https://thinkster.io/angular-rails
2 - Running as a separate project and use rails as only as an API. (this is my preferred method) due to following reasons.
this will give a separation between your rails app and angular app. Basically you are forced to implement things in standard api way, like authentication etc. hence overtime you will have a more solid rails api and angular fronted
once you have the separation, you can run these two in different app servers if you wish to. gives better load balancing etc..
You can always replace both frontend and backend with different technologies later, like amber and node since they communicate only via an http api.
So this option will need more time and effort, but, if possible its defiantly worth it :)
Related
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.
I understand that React is frontend, and NodeJS is the backend that allows Javascript code to function outside of a browser. What I don't understand (and this is after following tutorials online on setting up a React project and a NodeJS project) is why I have to create an instance of each.
For example, in my React project, I managed to create a website. But because I needed a backend, I decided to use NodeJS. But I'm doing NodeJS tutorials, and I can create a website using NodeJS too. I'm confused because right now, it's appearing to be that React and NodeJS do the SAME THING.
I have never worked with NodeJS before so I am a bit confused. I was under the impression that I would just use NodeJS to host the backend, but after seeing that I'm literally having to create an entire website with NodeJS, I don't understand how I'm supposed to use React and NodeJS together.
How do the two, React and NodeJS, integrate together to create a fully-functioning web app? I have yet to see something online that clearly breaks down how the two interact.
React is front-end library. It provides great tooling for creatiing user interfaces. And it creates a single page application. Which means when you open a react app. It does not reload and its really fast.
While you could also use nodejs and something like handlebars to create a website. But that website would be rendered on server and then served to the user. But its alot more than that. There are a lot of things that you want to do on the server. Like authentication. You want that part to be secure. So you keep it on the server.
Now the answer to the final part of your question.
For a fully functional app. You would use react to create user interfaces. And nodejs for creating an API which your react app will call.
NodeJS is not just regular javascript, it is a javascript runtime that sits on top of a C++ engine called V8, provided by Google. Node executes outside the browser, whereas React / Vue / Angular / etc are in-browser javascript frameworks.
React is a whole separate animal; it is a framework that renders its own DOM in the browser. It is a javascript engine that is configured to optimize DOM manipulation.
While the development pattern of frontend and backend appear similar, they are doing different things. React is handling component lifecycles, applying dynamic style rules, processing in-browser data, and making API calls. Node is handling requests from the browser, coordinating access to the server's file system, managing network I-O, performing cryptographic evaluation, etc. Because of these different responsibilities, Node makes use of different dependencies (read: node modules) than a frontend framework.
Ultimately, Node and React communicate through HTTP calls (or, less frequently, through a WebSocket or SOAP protocol).
It would behoove you to read about how node works under the hood.
NodeJS is just a runtime that allows you to run javascript code outside of the browser.
In order to compile and transpile the react JS app, they use webpack and other tools which runs over NodeJS.
NodeJS will serve as your backend, whereas ReactJS will create the interface/UI where you can actually manipulate your server (nodeJS). So first you'll write your NodeJS server or API. You don't need to use ReactJS to create a frontend that would interact with your node server, like you said you can use NodeJS to create your views as well through a different library. ReactJS is just one choice of many for the front end of your NodeJS app.
The point is that react and any other SPA library is working on a client-side (browser).
React fetch and consume the data from the server API.
You don't need to use Node.js for building API. You can use various frameworks based on the technology you prefer.
If you are not familiar with the Back End, you can use https://www.npmjs.com/package/http-server to have a fake API service and can build the Front End part with it.
NodeJS is a javascript framework that allows you to create a server to serve up websites using Express or the built in libraries. It also is capable of building a website with just NodeJS.
You can take advantage of the ability to do server side rendering with a NodeJS server.
https://reactjs.org/docs/react-dom-server.html
There is a ReactJS framework called NextJS tha has server side rendering of ReactJS component.
https://nextjs.org/#features
You could potentially have some areas of your website that are built solely with NodeJS and other pages that use ReactJS and a NodeJS backend. But it is cleaner to use ReactJS for the front-end and NodeJS for the backend.
I'm working on a project where we decided to use Angular and Rails for front-end and back-end. I know Angular and the back-end guys know Rails, we don't want to mix this together. There are a lot of tutorials like this on how to set up this as a single page app, I don't want this.
Is it possible to create an API with rails that I can just call with Angular? If so, is there any tutorials on how to do this?
Wha'ts the benefits of creating a single page app and mixing Angular with Rails? From my front-end perspective this just seems confusing.
Actually I'm currently working on a project that uses both angular and rails. The following things are what I did and may help you.
Separate the front end and the back end into 2 projects
For the back end I use of course Rails.
For the front end, I use Middleman since I am a ruby guy :P
Another reason for choosing middleman is that it has environments just like rails.
But you or your team can also choose bower or browserify or whatever that generates STATIC assests.
P.S. I tried RequireJS but decided not to use it because of its complicated boilerplate code.
Use Active Model Serializers for JSON responses.
Both the back end and the front end speak JSON (except for file uploading and downloading), so this is an obvious choice.
Note that Rails application should not send redirects, nor should it render HTML.
For the front end, ngResource is, well, not bad for consuming JSON responses, but sometimes you need to wrap it in your own services (I made my own resources factory based on $resource)
Use Devise Token Auth to provide OAuth2 authentication (Optional)
Of course you can use traditional cookie based authentication.
If you decides providing OAuth2, then ng-token-auth is a default consumer for Devise token auth. Note that ng-token-auth does not work so well with angular-file-upload.
Use Rack CORS for CORS (Optional)
Since the front end and the back end are 2 separated projects, they can also be deployed to different domains. In this case, implementing cross-origin resource sharing (CORS) is a must. Rack CORS can help you with CORS, but you can also implement it on the reverse proxy / load balancer layer and choose not to use Rack CORS.
I recommend to take a look at grape - https://github.com/ruby-grape/grape. It's a good way to create RESTfull APIs. It is really powerful, can generate swagger dynamic docs. Has a lot of useful addons - http://www.ruby-grape.org/projects/
I think the main benefit of hosting angular app in RoR is asset pipeline. It compiles/concatenates your assets automatically out of the box and you dont need to think about builds and gulp/grunt tasks. I developed a few apps that way.
Things that probably could help you with frontend part:
Bower for rails - https://github.com/rharriso/bower-rails
Here you can find a lot of libs as rails gems - https://rails-assets.org/
This gem generates rails routes as js helpers - https://github.com/railsware/js-routes
Extriemly usefull gem that allows you to access you rails variables from the frontend - https://github.com/gazay/gon
I am a student, and still very new to web development. Recently, I have come across angular 1.x, react.js, and angular 2 (Ultimately decided to land on angular 2).
One thing that have hung in my mind lately is server-side pre-rendering. In my thought, this server-side pre-rendering is doing the job of server template processor (Like jade.js. I haven't tried it though). The difference is that the js templating code can be reused on client-side. Is my understanding correct? Does it mean that we can use angular 2 or react in place of other templating engines?
Angular 2's server-side rendering isn't replacing a templating engine.
Server-side rendering lets you write your Angular 2 code as you normally would (with or without something like jade). The server renders the first page the user will see, so the user isn't looking at a blank page while the javascript loads. This decreases perceived page load times and makes the site more accessible to web crawlers.
This video shows how you would implement server-side rendering in Angular 2. There are some links to starter repos in the comments.
Angular 2 Universal is the server rendering project that is developed PatricJS and Jeff Wepley. Here is the maintained project in git.
It's a starter seed for new comers.
Here (SystemJS)
For WebPack
For usage:
git clone https://github.com/angular/universal-starter/
git checkout systemjs
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.