Angular 2

Hello everyone, it's Nebil!

Today I am going to talk aboutAngular 2. It's already been a year since we've been at version 1.0, considering that the very first version of Angular was released in 2009.

 

angular-2-netdevices

Introduction to Angular and Angular 2

Angular is a Framework ("framework of function") Front end in open source. Unlike the back end which will require a database, the front end will be more related to the design, to the interface of the platform.

What is the main purpose of Angular?

If we were to make an allegory of the human body, the structure of a website could be defined as follows:

  • the skeleton that could match the code HTML
  • the "dressing up", the design that would be possible thanks to the CSS
  • the "action", the interactions with the interface, which would be rather related to language Javascript

UX will obviously depend on these factors. One of the main objectives of Angular will be to improve the interaction between Javascript and HTML

Why did we switch to Angular 2?

 

angular-2-google-smartphone

For a few years now we have been witnessing an accelerated mutation of the internet and connected objects. Indeed, the internet is now "cross device" (smartphones, tablets, computers...). In addition, we no longer use browsers in the same way. We are constantly developing new functions and extensions to expand the possibilities. However, this has an impact: the slowing down of the browser. Angular 1 was originally too "tied" to the browser and therefore not powerful enough for the use we have of the internet on mobile devices for example. 

When Google engineers designed Angular 2, they looked to the future. They imagined that we would be more mobile. It would therefore have to be cross-platform, minimising the attachment to the browser, which implies that we would no longer be so constrained to follow the browser's updates. This detail will allow more speed.

There is a real contrast between Angular 1 and 2, if only for learning. Angular 2 is of course more complex. This complexity is due to the fact that The use of this tool also requires knowledge of Typescript and Rxjs (Reactive Extensions). Typescript allows the use of new technologies in Javascript. It will have a role of intermediary by making the new technologies compatible with the old ones, which makes it possible not to undergo the constraint of the updates. Rx will take care of the data management.

Angular 2 and React

angular-2-vs-react

There is a real debate between Angular 2 designed by Google and React of facebook in terms of performance. 

React offers a version "Virtual DOM"and Angular2 another version".Shadow DOM” . However, they both aim to limit the device's dependence on the DOM through partial or even total abstraction from it.

The virtual DOM will correspond to a virtual copy of the DOM, considered to be much lighter than the latter. However, when the DOM is modified, the developer must update it regularly.

In comparison, Angular 2 will rely on the "shadow DOM" which consists of a partial abstraction of the DOM. This means that direct modifications to the DOM are made, which avoids the need to constantly monitor for updates. This is made even easier by Typescript.

The value of abstaining from the DOM

In simple terms, the DOM (Document Object Model) is an API (Application Programming Interface) that allows the development, management and proper use of documents in HTML and XML.

The DOM was originally designed for computer browsers. This implies (as soon as you change device) a limit to the amount of data stored, and therefore a considerable impact on speed and performance. An abstraction of the DOM will reverse this trend and make application programming much simpler on the one hand, and an improvement of theUX/UI.

Although we use both technologies at NetDevices, I chose to specialise in Angular 2 because I use Meteor.js. This allows me to make fullstack in real time.

Angular 2 at NetDevices

We regularly use Angular 2 at NetDevices when building web and mobile applications. We are also using it on projects for two of our clients, consisting of creating a back office and a application mobile allowing them to broadcast radio and advertisements in their shops. For these projects, we are combining Angular 2 à Cordova and Ionic2.

 

netdevices

 

NetDevices is a team of methodical project managers, geeky developers, integrators / web designers, all passionate about web development and new technologies.

With our Web2Mobile, Sharry (mobile market place) solutions, and our partnership with IBM, we know how to meet your needs from the simplest to the most complex.

Our preferred technology areas (but not only):  Fullstack JS, React Native, ReactJS, Nodejs, Angular 1&2, Ionic, Cordova, Redux... and associated tools : Stack mean, Jira, Jenkins, Slack, Trello, continuous integration, TDD

For more information, do not hesitate to contact us!

 

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/angular-2/" data-token="2fc59a98beec225aaa51eed87ffc9410"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="5435"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->