Maintainable javascript applications with angularjs and requirejs

1. AngularJSMeetup
Intilery.com

2. About Me
• Founder and CEO of Intilery.com
• Previously the CIO of The Hut group
• And before that, 10 years as chief architect of
Moneysupermarket.com

3. Intilery.com – App Stack
5 parts:
• UI/Web app dashboard (angular)
• UI/Web app email designer (angular)
• App Backend
• A data collector/segmenter/analytics
&personalisation engine
• An email Sender (think mail chimp)

4. Intilery.com – Tech Stack
• Web apps – Angular, jQuery, Require (lots of
libs) talks to Java using JSON
• App backend – Java, Jersey, Spring IOC, Guava,
Mongo, MySQL
• Collector – Java event pipeline, twitter storm
(like), rules engine, elastic search, MySQL
• Emailer – Java, Spring Quartz, StringTemplate
• Env - AWS

5. Intilery.com
• Demo

6. RequireJS + AngularJS
Maintainable JavaScript Application = oxymoron?
Apply the same principles of good software engineering
to angularjs apps.
JavaScript is very flexible, very easy to write
undisciplined code (and architecture) – be strict!

7. Principles
Each file should contain one (and one only) component –
directive, filter, service, controller, view etc.
Split out components into smaller components (each own file).
Spilt out the app into smaller apps – We use our API’s to
integrate app.
Use RequireJS to manage the dependencies and loading of libs
and your components

8. RequireJS Setup
All code at
https://github.com/cymantic/angular-require-
testacular

9. Directory Structure
index.html (the require script tag goes here)
--libs
--angular
--jquery
--require
require-jquery.js (jQuery loaded here)
--domReady (needed in some browsers when scripts loaded before dom is ready)
--scripts (your components)
--controller
--directives
--filters
--resources
--services
app.js (angular module of app defined here)
bootstrap.js (manual bootstrapping of the app)
main.js (require configuration and route configuration)
--styles
--templates
--views

10. <script data-main="./scripts/main.js" src="libs/require/require-jquery.js"></script>
(we are not yet optimizing the files into a single file – todo before beta launch)
main.js

11. app.js – first non-library to load, we define our module here
bootstrap.js – manually start up the application

12. Configuration

14. Controller
EditLinkController
TextService
(modal)
MergeTagSvc
DataModelRsrc
AlignmentMenuSvc
SelectionMgrSvc
PasteMgrSvc
FormattingMgrSvc

15. Text Inspector Controller

16. Text Content Svc – bound to the content editable element we are editing

17. Merge Tag Service