Sharing Top Content from the Angular-sphere.

Angular is coming: Preparing the upgrade – Grubhub Bytes

Angular is coming: Preparing the upgrade – Grubhub Bytes

  • JavaScript (ES5) to TypeScriptThe Angular source code isn’t just built with TypeScript — they also strongly encourage developers using the Angular framework to build their applications with it.
  • A page can be considered a parent component that houses the application state and trickles that state down to child components through one-way data bindings.
  • you again open up developer tools and look at the source code in script.js, you’ll see that we changed several things: – We converted the previous directives to components, which has a different but simpler syntax.From the parent name-container, we pass the name to its child components through input bindings….
  • This is much more predictable because the parent sees the change first and then the children see the change afterwards.Before: ES5 Directive with two-way data binding – After: TypeScript Component with one-way data binding – Dynamic templatesOne of the features we used extensively in AngularJS was the template function that…
  • Keep in mind that this requires a parent container to ng-switch on.Create a separate component for each unique template file, but use the same base controller to reduce code repetition.Utilizing ng-switch for templates – Separate components with same base controller – No more eventsAngularJS gave developers the ability to to publish…

We hope you enjoyed the previous meme-filled part one of this blog post series where we explained the history of our web application and why AngularJS had to be completely reworked into Angular to…

Angular is coming: Preparing the upgradetsaibot sandwichWe hope you enjoyed the previous meme-filled part one of this blog post series where we explained the history of our web application and why AngularJS had to be completely reworked into Angular to remain competitive.

Due to the significant changes for said rewrite, we knew we had our work cut out for us, so over several months, we planned and slowly converted our application code to match the new patterns that Angular enforced. This helped mitigate our risk during the upgrade, and as a positive side effect, also improved performance and testability. This article, part two of the series, will focus on the high-level changes we made prior to modifying 500k lines of code. This included upgrading from ES5 to TypeScript, componentizing our application, handling dynamic templating, hacking around events, and preparing Protractor to ensure upgrade reliability.

JavaScript (ES5) to TypeScriptThe Angular source code isn’t just built with TypeScript — they also strongly encourage developers using the Angular framework to build their applications with it. As you can probably tell from the name, it gives typing to regular JavaScript in order to help developers capture errors earlier during the transpiling process. The example below outlines how this would work.

Not convinced? Consider these other compelling reasons to make the switch:

Any type of programming language switch is going to be a massive effort, but fortunately, unlike other JS preprocessors like CoffeeScript or Dart, TypeScript is completely optional meaning…

Angular is coming: Preparing the upgrade – Grubhub Bytes