Supporting Old-Fashioned AngularJS Apps in a Modern TypeScript World

Jennifer Wadella

#devinspo

to whoever needs to hear this:

					the concept you're currently struggling to learn, stick with it, because it's all going to start to make sense very soon.
Jennifer Wadella headshot

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

  1. Modularize app
  2. Update/create build process to compile TypeScript files
  3. Convert core app structure files to TypeScript
  4. Take advantage of RxJS where it makes sense
  5. Build new features using Angular elements(web components)

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

Update/create build process to compile TypeScript files

Three main build options

Grunt
Gulp
Webpack

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

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
  • Services
  • Routing?

Reactive Programming Crash Course

Declarative Programming
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
programming JavaScript library.

Using Angular Elements

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?

Jonah Hill Screaming

What NOT to Do

Do NOT run back to work and refactor your app over the weekend WITHOUT the consent of your team.

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?

Corgi confused

Slides available at: tehfedaykin.github.io/ModernizingAngularJSApps

Example App: https://github.com/tehfedaykin/AngularJSQueens

No Key No Shade: A RuPaul's Drag Race API

#ModernizingAngularJS @likeOMGitsFEDAY