Supporting Old-Fashioned AngularJS Apps in a Modern TypeScript World
- Legacy code sympathizer
- Community Organizer
- Kombucha brewin' crazy plant lady
"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.
- 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)
Key Style Guide Concepts
- Practice Single Responsibility
- Use named functions
- Write Controller view as "vm" syntax
Update/create build process to compile TypeScript files
- Compile TypeScript files (lol duh)
- Inject compiled JS bundle to entry file (index.html)
- Serve compiled files
Webpack nice to haves
- Development vs. test vs. production code
Convert core app structure 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
Start Using RxJS where it makes sense
- Managing forms
Reactive Programming Crash Course
vs Imperative 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
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
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.
- 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!