Integrating Into Existing Code for AngularJS, ELM, and ReactJS

AngularJS

The following steps suggest a method to integrate AngularJS into your existing applications:

Write at least one small AngularJS application from the ground up that uses a model, custom HTML directives, services, and controllers. In other words, in this application, ensure that you have a practical comprehension of the AngularJS separation of responsibilities.

Identify the model portion of your code. Specifically, try to separate out the code that augments the model data in the model into controller functions and code that accesses the back-end model data into services.

Identify the code that manipulates DOM elements in the view. Try to separate out the DOM manipulation code into well-defined custom directive components and provide an HTML directive for them. Also identify any of the directives for which AngularJS already provides built-in support.

Identify other task-based functions and separate them out into services.

Isolate the directives and controllers into modules to organize your code.

Use dependency injection to link up your services and modules appropriately.

Update the HTML templates to use the new directives.

Obviously, in some instances it just doesn’t make sense to use much if any of your existing code. However, by running through the preceding steps, you will get well into the design phase of implementing a project using AngularJS and can then make an informed decision.

Elm

Elm has three different ways to embed components and applications: fullscreen, embedded and worker. Fullscreen replaces the page with the Elm app, great for writing web-based games. Embedded mode functions in the same way as React: it renders into a particular DOM node. Worker lets you use the Elm component inside of a web worker, as a background process that works with the rest of your app.

To communicate with JavaScript code, you can pass things into Elm with flags for one-way communication (similar to passing properties into a React component), or you can use subscriptions to listen for events from the Elm component, such as mouse clicks or text input changes (similar to event callbacks in React). When we limit the comparison between Elm and React to React’s mode of integration, Elm is a bit more complicated in terms of having to set up flags and subscriptions but once you get used to it, it’s about as easy as React.

What could give Elm an edge over React is the compilation and bundling. You can compile multiple Elm components into one bundle and then include a script tag and an initialization script: you now have access to all of your Elm components in a nice convenient package. Because it is built into Elm, you don’t have to rely on Grunt, Gulp, Webpack, SystemJS or whatever flavor of module bundler and build system is popular today. 

ReactJS

React has only one way of being integrated into a code base: it can only replace DOM nodes. This is great because it keeps things simple, and when you’re working on integrating React into an existing code base, all you need to worry about is passing data from the rest of the web app into the React components.

All the other nice things about React, like using Redux, Nuclear.js, Immutable.js and ReactRouter, can be integrated later on. React is only one part of the framework and it can function as a replacement for the view rendering of any other framework. You don’t even have to use the JSX syntax! You can start using React in an existing web app by including the React and ReactDOM scripts and with a few lines of JavaScript you can define and insert a React component into the page.

 

 

Copyright © All Rights Reserved - C# Learners