Building modular enterprise scale AngularJS applicationsJonathan Fontanez@jonfontanez

Topics

Modularity

Architecture

Problem statement

Designing modular AngularJS project

Extending

Packaging

Maintaining

Future

Why?

“The degree to which a system’s components may be separated

and recombined”- wikipedia

Node Modules Client Modules

Expectations

● Small modular pieces

● Loosely coupled

● Highly cohesive

● Easily modified

Reality

Modular pieces

Not well integrated

Difficult to locate and append modules

What happened?

Straight from the AngularJS docs!

Key Takeaways from doc

● Best practice for application structure● AngularJS styleguide by John Papa (the missing styl

eguide)

Problem statementAngularJS provides an MVVM framework. It does not natively include the capability to build scalable and maintainable software

Getting Started

Designing a Google like API explorer

Working example available on github.com/tato123/angular-modules-presentation

● Built with GWT● Browse rest services

and their operations● Extensible

Things to note

● List services

Browse Services

● List services● Register a set of APIs

Browse Services

● List operations for a given service

Browse Operations

● List operations for a given service● Register operations for a given service

Browse Operations

What are our steps?

● Structure● Loading Components● Code Consistency● Testing● Extending

Definitions

Component Encapsulates an AngularJS feature, defined as a unit of work that exposes a UI segment or common utility functions exposed as a service. Manifestation of a feature

Feature Logical unit, a feature is implemented as a component (feature is the thought, component is the representation)

Module In the context of AngularJS, a module can represent a single component or a collection of components that provide a business function

Structuring components

AngularJS sample applications focus on grouping by functionality

ControllerServicesViewsetc…

Structuring components

AngularJS sample applications focus on grouping functionality

ControllerServicesViewsetc…

Great for getting started!

Function based structure● Foo and bar features● Separated by AngularJS

functionality● Consistent naming

Function based structure● Foo and bar features● Separated by AngularJS

functionality● Consistent naming

Challenging to scale past 4 or 5 modules

Problems with function based structures

● Dependent on implied coding conventions○ Must name each feature file consistently○ Requires concise naming up front

● Features exist only as a function of AngularJS● Determining test coverage of an independent feature is

challenging

Feature based structure

Structuring components

LIFT [STYLE Y140]

Locating our code is easyIdentify code at a glanceFlat structure as long as we canTry to stay DRY (Don’t Repeat Yourself) or T-DRY

Feature based structure● Foo and bar modules● Feature based● Flat structure● No reliance on file names● Consistent with node

projects

Structuring Components

appapplication main component

browseservice browse logic

operationsoperations browse logic

registryprovider to register services

api-foomock service

Structuring Components

● Flat directory structure

● Names represent feature

● Nothing angular so far● No file name

dependency● Identifies content● Features

encapsulated

Value from structured features

Loading Components

Loading Components

Loading Components

Script loading hell

Loading Components

● index.html merge conflict when working in distributed environments

● declares the universe of scripts, not specifically what your application is actually using

● does not tie back to components● duplicated when unit testing using tools like Karma

Loading Components

What do we want?

Loading Components

● Reduce merge conflicts on index.html● Use the component structure already present in our

app● Declare our dependencies● Have it done automatically

○ Let the build tools manage it!!

What do we want?

● CommonJS ● Supports npm

modules● Supports our features

Loading Components

app

operationsbrowse api-foo registry

Loading Components

Loading Components

Loading Components

Loading Components

Remember that pesky index.html...

Loading Components

Writing clean functionality

Code Consistency

Code Consistency

[Y001] - One component per file[Y020] - Avoid naming collisions[Y024] - Use named instead of anonymous

functionsJust a small list, implement the

John Papa code style guidelines

[Y001] - One component per file

Code Consistency

● Export a single AngularJS function

Benefits

● Small focused functionality● Maintenance / readability● Debugging● Portability

[Y001] - One component per file

Code Consistency

● Export a single AngularJS function

Benefits

● Small focused functionality● Maintenance / readability● Debugging● Portability

Code Consistency

Registry

● AngularJS Provider● Allows services to

dynamically register● CommonJS export

Significantly easier with modules

Testing Components

Testing Components

Test Configuration

● Single import, same as index.html

● Components synchronized (app and unit test)

NoteBring your own test tools, doesn’t have to be Karma or Jasmine

Testing Components

Optional TipConsider co-locating your test or spec files with each of your components

ExtendingModular components

Extending

Packaging ● Components represent isolated pieces of functionality

● Components are loosely coupled● Components in CommonJS syntax

already (npm ready)● Browserify supports npm modules

What we’ve got so far

Extending

Packaging

Building a module

component A

npm module

package.json

component B

my-new-module

Extending

Packaging ● Pull in modules from local and remote repositories (i.e. artifactory)

● Independent testing as modules● Support distributed development● Independent versioning

Benefits

Extending

Maintenance and versioning

● Separation of core and supporting modules○ Independently testable ○ Independently versioned

● Focus on smaller concise modules

Benefits

Extending

● Export a new api service● Plain npm module

Adding a new API

Extending

APP

Core Source node_modules

echo api

CommonJS

Extending

Extending

Extending

Extending

Extending

Extending

FutureAngularJS2 and ES6

Resources

Twitter@jonfontanez

Githubgithub.com/tato123