building modular enterprise scale angular js applications
TRANSCRIPT
![Page 1: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/1.jpg)
Building modular enterprise scale AngularJS applicationsJonathan Fontanez@jonfontanez
![Page 2: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/2.jpg)
Topics
Modularity
Architecture
Problem statement
Designing modular AngularJS project
Extending
Packaging
Maintaining
Future
![Page 3: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/3.jpg)
Why?
![Page 4: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/4.jpg)
![Page 5: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/5.jpg)
![Page 6: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/6.jpg)
![Page 7: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/7.jpg)
“The degree to which a system’s components may be separated
and recombined”- wikipedia
![Page 8: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/8.jpg)
Node Modules Client Modules
![Page 9: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/9.jpg)
Expectations
● Small modular pieces
● Loosely coupled
● Highly cohesive
● Easily modified
![Page 10: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/10.jpg)
Reality
Modular pieces
Not well integrated
Difficult to locate and append modules
![Page 11: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/11.jpg)
What happened?
![Page 12: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/12.jpg)
Straight from the AngularJS docs!
![Page 13: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/13.jpg)
Key Takeaways from doc
● Best practice for application structure● AngularJS styleguide by John Papa (the missing styl
eguide)
![Page 14: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/14.jpg)
![Page 15: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/15.jpg)
Problem statementAngularJS provides an MVVM framework. It does not natively include the capability to build scalable and maintainable software
![Page 16: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/16.jpg)
Getting Started
![Page 17: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/17.jpg)
![Page 18: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/18.jpg)
Designing a Google like API explorer
Working example available on github.com/tato123/angular-modules-presentation
![Page 19: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/19.jpg)
![Page 20: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/20.jpg)
● Built with GWT● Browse rest services
and their operations● Extensible
Things to note
![Page 21: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/21.jpg)
● List services
Browse Services
![Page 22: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/22.jpg)
● List services● Register a set of APIs
Browse Services
![Page 23: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/23.jpg)
● List operations for a given service
Browse Operations
![Page 24: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/24.jpg)
● List operations for a given service● Register operations for a given service
Browse Operations
![Page 25: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/25.jpg)
What are our steps?
● Structure● Loading Components● Code Consistency● Testing● Extending
![Page 26: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/26.jpg)
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
![Page 27: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/27.jpg)
Structuring components
AngularJS sample applications focus on grouping by functionality
ControllerServicesViewsetc…
![Page 28: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/28.jpg)
Structuring components
AngularJS sample applications focus on grouping functionality
ControllerServicesViewsetc…
Great for getting started!
![Page 29: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/29.jpg)
Function based structure● Foo and bar features● Separated by AngularJS
functionality● Consistent naming
![Page 30: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/30.jpg)
Function based structure● Foo and bar features● Separated by AngularJS
functionality● Consistent naming
Challenging to scale past 4 or 5 modules
![Page 31: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/31.jpg)
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
![Page 32: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/32.jpg)
Feature based structure
![Page 33: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/33.jpg)
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
![Page 34: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/34.jpg)
Feature based structure● Foo and bar modules● Feature based● Flat structure● No reliance on file names● Consistent with node
projects
![Page 35: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/35.jpg)
Structuring Components
appapplication main component
browseservice browse logic
operationsoperations browse logic
registryprovider to register services
api-foomock service
![Page 36: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/36.jpg)
Structuring Components
● Flat directory structure
● Names represent feature
● Nothing angular so far● No file name
dependency● Identifies content● Features
encapsulated
![Page 37: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/37.jpg)
Value from structured features
Loading Components
![Page 38: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/38.jpg)
Loading Components
![Page 39: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/39.jpg)
Loading Components
Script loading hell
![Page 40: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/40.jpg)
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
![Page 41: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/41.jpg)
Loading Components
What do we want?
![Page 42: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/42.jpg)
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?
![Page 43: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/43.jpg)
● CommonJS ● Supports npm
modules● Supports our features
![Page 44: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/44.jpg)
Loading Components
app
operationsbrowse api-foo registry
![Page 45: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/45.jpg)
Loading Components
![Page 46: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/46.jpg)
Loading Components
![Page 47: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/47.jpg)
Loading Components
![Page 48: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/48.jpg)
Loading Components
Remember that pesky index.html...
![Page 49: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/49.jpg)
Loading Components
![Page 50: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/50.jpg)
Writing clean functionality
Code Consistency
![Page 51: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/51.jpg)
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
![Page 52: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/52.jpg)
[Y001] - One component per file
Code Consistency
● Export a single AngularJS function
Benefits
● Small focused functionality● Maintenance / readability● Debugging● Portability
![Page 53: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/53.jpg)
[Y001] - One component per file
Code Consistency
● Export a single AngularJS function
Benefits
● Small focused functionality● Maintenance / readability● Debugging● Portability
![Page 54: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/54.jpg)
Code Consistency
Registry
● AngularJS Provider● Allows services to
dynamically register● CommonJS export
![Page 55: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/55.jpg)
Significantly easier with modules
Testing Components
![Page 56: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/56.jpg)
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
![Page 57: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/57.jpg)
Testing Components
Optional TipConsider co-locating your test or spec files with each of your components
![Page 58: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/58.jpg)
ExtendingModular components
![Page 59: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/59.jpg)
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
![Page 60: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/60.jpg)
Extending
Packaging
Building a module
component A
npm module
package.json
component B
my-new-module
![Page 61: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/61.jpg)
Extending
Packaging ● Pull in modules from local and remote repositories (i.e. artifactory)
● Independent testing as modules● Support distributed development● Independent versioning
Benefits
![Page 62: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/62.jpg)
Extending
Maintenance and versioning
● Separation of core and supporting modules○ Independently testable ○ Independently versioned
● Focus on smaller concise modules
Benefits
![Page 63: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/63.jpg)
Extending
● Export a new api service● Plain npm module
Adding a new API
![Page 64: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/64.jpg)
Extending
APP
Core Source node_modules
echo api
CommonJS
![Page 65: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/65.jpg)
Extending
![Page 66: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/66.jpg)
Extending
![Page 67: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/67.jpg)
Extending
![Page 68: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/68.jpg)
Extending
![Page 69: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/69.jpg)
Extending
![Page 70: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/70.jpg)
Extending
![Page 71: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/71.jpg)
FutureAngularJS2 and ES6
![Page 72: Building modular enterprise scale angular js applications](https://reader035.vdocuments.mx/reader035/viewer/2022070514/58819c651a28ab1a398b45e1/html5/thumbnails/72.jpg)
Resources
Twitter@jonfontanez
Githubgithub.com/tato123