Supporting Old-Fashioned AngularJS Apps in a Modern TypeScript World
Jennifer Wadella
#devinspo
Jennifer Wadella
@likeOMGitsFEDAY
- JavaScript Developer at Bitovi
- Legacy code sympathizer
- Community Organizer
- Kombucha brewin' crazy plant lady
The Problem
"We're going to upgrade our AngularJS app ... some day."
"How do we keep building features while preparing for an upgrade?"
"How do I keep my skills updated as a developer?"
"I just got this AngularJS app dropped in my lap to maintain - TF do I do?"
You can take advantage of modern techniques TODAY
Goals for this Talk
- Give you a roadmap of how to modernize your AngularJS app.
- Give you a crash course on modern concepts you may have tuned out on previously
- Give you resources to use to help advocate for modernizing your app.
- Give you an example repository with common scenarios to refer to.
Roadmap
- Modularize app
- Update/create build process to compile TypeScript files
- Convert core app structure files to TypeScript
- Take advantage of RxJS where it makes sense
- Build new features using Angular elements(web components)
1. Modularize App
The AngularJS style guide by John Papa
Key Style Guide Concepts
- Practice Single Responsibility
- Use named functions
- Write Controller view as "vm" syntax
2. Update/Create Build Process to Compile TypeScript Files
Why TypeScript?
- TypeChecking
- Es6 goodies
- Readability
- Documentation
Three main build options
Webpack
Webpack Needs
- Compile TypeScript files (lol duh)
- Inject compiled JS bundle to entry file (index.html)
- Serve compiled files
Webpack nice to haves
- Bundling
- Development vs. test vs. production code
3. Convert Core App
Files to TypeScript
TypeScript Crash Course
- Types - determine what "types" variables should be
- Classes - special functions that help abstract code
- Interfaces - way to describe a programatic entity
- Generics - way to reuse code for different types
- Es6 Goodness
Back to AngularJS App Conversion
With TypeScript implemented:
- Can encaspulate components/modules
- Can import HTML and css files
- Can import and export features
- Catch errors on compile time
4. Start Using RxJS Where it Makes Sense
- Services
- Routing
- Managing forms/user events
- State Management
Reactive Programming Crash Course
Imperative Programming
vs Declarative Programming
Imperative - When events occur, code runs and
changes the state of the program.
Declarative- Specifying HOW values should be generated.
Reactive - A declarative programming style concerned with data “streams” and propagation of change. RxJS is a reactive
programming JavaScript library.
RxJS is a library that helps us program reactively.
Detour: State Management
(& a case for RxJS)
A strategy to handle the state of an application, preferably
one that limits mutation/unintended side effects.
JavaScript is the Wild Wild West
Scenario: Simple State Management
using Angular Services & Behavior Subjects
/detour
RxJS
We can use RxJS in AngularJS to program reactively by creating event streams from user input and http requests to write better, more debuggable, business-logic-oriented code.
Using RxJS to approach state management may be one of the quickest ROIs on embracing this library in your app
5. Build New Features Using Angular Elements(web components)
Web Components 101
Web components are a way to build framework agnostic reusable components.
Web Components API
Browser APIs that let us build web components:
- Custom elements - let you define an HTML tag
- Templates - let you create the markup
that will be inserted dynamically - Shadow DOM - provides encapsulation for web components
- Custom events - allow you to create triggers for
DOM interaction
Check out Bitovi's training on web components here
Angular Elements =
Angular Components packaged as custom elements(web components)
Further Angular Elements Exploration:
Excited to modernize your app?
What NOT to Do
Do NOT run back to work and refactor your app over the weekend WITHOUT the consent of your team.
PSA:
AngularJS support from Google will end June 30 2021
https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c
Key Concepts
- Begin refactoring your app to follow the AngularJS style guide
- Choose a build process that makes sense for your team
- Start with rewriting major files into TypeScript
- Implement RxJS where it makes sense
- Consider building new features in Angular Elements
- Do NOTHING without buy-in from your team!
Questions?
Slides available at: tehfedaykin.github.io/ModernizingAngularJSApps
Example App: https://github.com/tehfedaykin/AngularJSQueens