1 of 22

Structuring a Scalable AngularJS Project with RequireJS

Jeff Chew

Slides: http://goo.gl/gtv79v

Sample Code: https://github.com/jeffchew/angularjs-requirejs-presentation-examples

2 of 22

Introduction

Who am I: Presentation Layer Lead at Razorfish for all Ford/Lincoln projects

​

Projects:

  • Ford/Lincoln Owner Portals (owner.ford.com / owner.lincoln.com)
  • Corporate (corporate.ford.com)
  • Quicklane (quicklane.com)

​

3 of 22

The Year of Replatforming

Adobe Experience Manager

  • Enterprise Content Management
  • Separation of Content and Services Layer
  • Business logic moved to client-side

4 of 22

owner.ford.com

owner.lincoln.com

  • Complex client-side functionality
  • Authentication
  • Tons of RESTful API service integration
  • Launched Q1 2015

5 of 22

corporate.ford.com

  • Content heavy
  • Atomic design, reusable modular components
  • Light functionality
  • Launched Q4 2014

6 of 22

quicklane.com

  • Mix of content and complex client-side functionality
  • Some similar functionality to Ford/Lincoln Owner
  • Launched Q4 2014

7 of 22

None of these are Single Page Applications

8 of 22

AngularJS to the rescue!

  • Client-side Framework
    • Modular Dependency Injection
  • RequireJS
    • Dependency Management
    • Optimization

​

9 of 22

What’s the Difference?

RequireJS Dependency Loading

  • A way to define file dependencies and load asynchronously
  • A way to load dependencies in the order that you define
  • One of the gold standard ways of JS asset optimization (r.js)
  • Framework (or lack of) agnostic

10 of 22

What’s the Difference?

AngularJS Dependency Injection

  • A way for your Angular module to inherit already packaged/modularized functionality
  • Kinda like plugins, but not really, and much much more
  • Actually, stop thinking of it like plugins, and start thinking modular.

11 of 22

Basics: Single AngularJS Module (without RequireJS)

  • We want to define our app, config, controllers, directives, etc.
  • App is initialized:
    • ngApp (common with simple one-page apps)
    • Manual Bootstrap
  • Tons of examples online show all definitions in one page (non-RequireJS way)

12 of 22

Single AngularJS Module (with RequireJS)

  • Separate controllers/directives/etc into their own files
  • Better code maintainability/readability
  • Templates can live with the module
  • Spec files stay within the module
  • Remember to defer bootstrap if using ngApp method

13 of 22

AngularJS Module Dependency Injection

  • Bringing module functionality into other modules
  • Keeping module logic separate
  • Module that’s initialized inherits all functionality of the modules injected (controllers/directives/etc)

14 of 22

Multi-page AngularJS Modules

  • Many pages, varying needs/functionality
  • Not all pages need the kitchen sink
  • ngApp Manual bootstrapping, module dependency injection

15 of 22

Putting into Practice

Ford / Lincoln Owner

  • More than several dozen distinct feature functionality
  • Close to 90 distinct RESTful service integration points
  • ~15 AngularJS developers
  • Cross pollination of common functionality across several work streams

16 of 22

Multi-Modular Approach using RequireJS

  • Scalable
  • Reusability
  • High level of maintainability
  • Modular testability

17 of 22

Unit Testing with RequireJS

  • Karma (Jasmine)
  • Documentation online (http://karma-runner.github.io/)
  • Bonuses for using RequireJS:
    • Ease of loading and isolating individual modules for testing
    • Leverage RequireJS Text plugin for loading mock data

18 of 22

Optimization with r.js

  • Should be part of your build process, regardless of what your stack is
  • Many ways to do it (GruntJS, Maven, Ant, etc.)
  • Run manually or part of continuous integration (CI) build process

19 of 22

AngularJS/RequireJS Boilerplate

https://github.com/Razorfish-East/angularjs-requirejs-boilerplate/

​

Please fork and contribute!

20 of 22

Gulp / Browserify

  • Non-AMD (CommonJS) approach
  • Fully modular AngularJS approach works here too!

21 of 22

Resources

Code samples: https://github.com/jeffchew/angularjs-requirejs-presentation-examples

Links:

Ford/Lincoln:

22 of 22

Thank you!

www.razorfish.com