Modernizing an AngularJS Web App
A Customer Case Study
The Challenge
Upgrading an old AngularJS application to modern features to enhance project clarity and developer productivity.
The Backstory
One of the best things about Javascript is how flexible it can be. We can create web, mobile, or server side solutions. Web technologies are moving crazy fast and offer more solutions than ever before.
Unfortunately, this speed its moving in is also one of the biggest challenges.
It seems like by the time you finish a project, there are several new frameworks and tools that get popular. Self-doubt creeps in and you wonder if you sold the team upstream. You feel left out of the party.
After two years of development, SensorInsight, like so many of us, was sideswiped with the tidal wave of tech that started eating the world.
- Angular2
- TypeScript
- Module Loader (Webpack, Rollup, etc)
- New standards/features in JavaScript with ES6
- Progressive Web Apps
- NativeScript
- React
- React Native
Angular2 was just announced and panic commenced within the community. Teams either jumped to React or immediately tried to re-write their application in beta versions of Angular2.
The Solution
We knew we couldn’t move to Angular2 or React. Too much time, money, and effort had been spent developing the product the past two years. The team just released their 2.0 SaSS model. This was a startup, not a huge corporation with an endless supply of resources.
A change that drastic would mean re-writing a lot of code, retraining their staff, and not getting back that initial investment.
We had two goals
- Make code more re-usable
- Make it easier for new developers to contribute to the project
Components with Angular 1. 5.X
While Angular had pretty good re-usability with directives, applications still tended to have rather large controller or service files. It provided a good sense of structure, but most directives were one-offs for specific use-cases in this situation.
Even though Angular2 was announced, the team at Google stated they would still provide updates and support for AngularJS (1). One of the biggest moves was the adoption of components.
We refactored the code and completely componetized the application, removed $scope variables, and aligned the project closer to what developers would see in Angular2+. Heres how to do it.
ES6 Support with Webpack
Adding support for the new JavaScript standard was important because this was the way the open source community was moving.
Libraries and tools were already ditching bower for npm. Startups and companies everywhere depend on open source for a lot of the routine functionality that can save weeks, months, if not years of time an money.
Finally, by adding a modular bundler like Webpack, it would open the door to some really cool and fancy performance benefits like tree shaking and code splitting. All these features would make for quicker loading times of the single page application.
Result
We were able to re-organize a two year old AngularJS application into modern standards with ES6 & re-usable components.
This provided a faster, more enjoyable workflow for developers as well as cut time to development down by more than half in some cases.
Because directives were very tightly coupled to the page they lived on, developers were re-writing a large portion of code to get the same or similar features elsewhere throughout the app.
Now with a set of library components, developers could simply add the new component tag to reproduce features across the app. Moving features to accommodate user feedback was easy as shuffling a few lines of code around.
These efforts allowed developers to structure the application into smaller, easier to understand, reusable pieces. This also means .jr or new team members could be more effective sooner.
Here’s a template project already configured
Learn more about SensorInsight and their IoT platform
