A presentation on AngularJS and the state of web development in 2015

TopicsPlease ask questions!

1. Who am I and what is Enplug?2. Web development in 20153. AngularJS examples4. JS frameworks

a. Considerationsb. Optionsc. AngularJSd. Angular 2.0 (upcoming)

5. React by Facebook6. Hybrid mobile apps7. Resources

Who am I and what is Enplug?

Alex RossFull-stack web developer &

mobile developer

● JavaScript● HTML 4-5● CSS 2, 3, and SASS● The Internet: DNS, HTTP, sockets,

CDNs, LB, etc● PHP & ZendFramework● Apache● MongoDB● MySQL● Objective-C (OSX & iOS)● RabbitMQ● Android & Java● Ruby (some Rails)● Python● PhoneGap / Apache Cordova

EnplugLos Angeles-based tech

company

● Founded in 2012● $5M in seed funding● 20 employees● B2B SaaS software● 500+ customers● Doing for digital displays what

Wordpress did for websites, or Shopify did for e-commerce

DisplayOSDisplay software for teams and

businesses

● C# app servers● Event-driven architecture using

RabbitMQ. Migrating to Amazon SQS● MongoDB & SQLServer● JSON endpoints & sockets● Hardware: thousands of Android-based

client devices running Java & JS-based apps

● Web, iOS and Android management apps

● 3rd party development SDK: developers.enplug.com

DisplayOSDisplay software for teams and

businesses

DisplayOS dashboard (latest AngularJS in production)

Web development in 2015

● Browser inconsistencies less of a serious issue for n-1 browsers

● JavaScript rapidly maturing (ES2015)

● HTML5 works well

● CSS3 works great

● Tools: maturing package managers, build automation, etc.

● Client-side data storage: IndexedDB for significant amounts of structured data, localstorage for simple key-value.

● Multi-threading: web workers (but still haven’t seen a good core use)

● Impressive improvements forthcoming: web components, class-based inheritance, modules, and much more.

Things are looking up

HTML5 & CSS3 support

Building apps for the web

Static pages

Server generated pages

JavaScript DOM manipulation (imperative)

Fastest initial page load. But, must re-render entire page to reflect changes in data.

Programmer manually updates specific parts of the page without entire re-render when data changes. Much smoother.

JavaScript data binding (declarative)

Same as above, except the framework observes data and does the DOM manipulation when data changes. Less work for the programmer.

Building apps with AngularJS

AngularJS is a JavaScript framework sponsored by Google that takes much of what was once done exclusively on servers, and puts it in the front-end. It is 100% JavaScript, 100% client-side.

Concepts: Routing, templating, dependency injection, code architecture (factories, singletons, scopes, MVVM) and more.

Why do some people put so much in the front-end? Speed and separation of concerns. It’s faster to update a part of a page than an entire page, and some people believe the client/browser should handle all UI while the server provides APIs for the browser, mobile devices and other clients.

Why so much in the front-end?

Patterns of organizing software into separate responsibilities in order facilitate faster and more stable development, also making it easier to maintain projects over time.

MVC: Model-View Controller

MVVM: Model-View View-Model

The simple difference: the view model is used to two-way bind data from the model (server) to the view (browser) using JavaScript. In practice, MVVM still usually has controllers to control overall logic.

Design patterns: MVC and MVVM

Hello World

● ng-app● Angular source (50 KB gzipped)● ng-model● data binding {{ }}

App definition

app.js

● Declare dependencies● Lifecycle hooks

○ .config()○ .run()

Example app

1. ng-app2. ng-controller3. ng-bind4. ng-view5. ng-hide6. ng-include7. ng-if8. <fab>

Routing

● Routing lifecycle hooks○ $routeChangeStart○ $routeChangeSuccess○ $routeChangeError

● Arbitrary data allowed in route config, useful for ACLs or other route-based logic

User interfaces: controllers and templates

AddUserController.jsadd-user.html

The model: services

● Services are dependency-injected into controllers and contain the app logic.

● Services hold the model. They read data and persist changes.

● Controllers should be as thin as possible (zero logic), only bring logic together.

● Controllers trigger model <=> view updates.

Loading data (1): controller “init”

Loading data (2): resolves

● resolves● DI

Angular services

● $http

● $log

● $cookies

● $exceptionHandler

● $interval

● $timeout

● $route

● $rootScope

● $sanitize

● $animate

● $templateCache

● $locale

● $location

● $q

● $httpParamSerializer

● … and more

Form data & validation

● ng-submit● ng-model● form.$submitted● form.$touched● form.$error● form.$invalid

Directives example: tooltip

tooltip.js (simplified)

Using the directive:

Result (including tooltip.html and tooltip.css)

Directive example: location-aware

location-aware.js

Marking current location as active for better UX: very common app-wide requirement.

● element● attributes● event system

JS functionality invoked on element by directive location-aware.

Directive example: color picker (jQuery plugin)

Result:

Angular built-in directives

● ng-repeat

● ng-class

● ng-hide/ng-show

● ng-if

● ng-form

● ng-include

● ng-href

● ng-src

● ng-repeat

● ng-list

● ng-pluralize

● ng-style

● ng-switch

● … and more

Directive example: ng-repeat

Controller + HTML template

Renders as:

Filters example

Controller + HTML template

Renders as:

Project structure

● Small projects: code organized by file type○ controllers, templates, services, etc.

● Bigger projects: code organized by module, then file type. Requires build automation.

● Distribution: concat, minify, obfuscate, etc:

JS frameworksIs a front-end framework (and AngularJS) right for your team? Perhaps

Q: Should my front-end app leverage data binding and reusable components?A: New projects: yes. Existing projects: eventually yes.

Q: Should I use a framework for this?A: Yes, unless you’re committed to reinventing many common components of an SPA

Q: Which framework should I use if I don’t already have one?A: As of October 2015, AngularJS, EmberJS or BackboneJS

Boiling it down: questions to start with

Single page apps (SPA) need proper code architecture (count the UI components)

1. To reduce boilerplate: let framework subroutines handle the nitty-gritty like routing, form validation, data binding, dependency injection, XHR requests, etc.

2. To leverage common knowledge: use existing patterns and best practices

3. To reduce ramp-up: a strong ecosystem of documentation, tutorials, blog posts, and training programs (e.g. Lynda) means you need to document and explain less of your app to new developers.

Big-picture reasons to use a framework

Takeaway: frameworks can help manage complexity

1. Data binding and reusable components are good ideas; little benefit to home-rolling them.

2. Your CRUD app is not that different from other apps. Key architectural pieces like routing, or base components like dropdowns, are functionally the same as other apps so you can leverage some work that has already been done.

3. The AngularJS team is exceptional and has moved web development forward with both original and well-implemented existing ideas. You want to leverage their expertise, particularly if you don’t fully understand what they did. I believe the individual people behind Angular are the biggest and most subtle difference that set AngularJS apart over the last 5 years.

Reasons specific to front-end development

1. AngularJS: opinionated, strict MV* implementation (2009)2. Ember: similar to AngularJS. Even more opinionated. (2007)3. Backbone: philosophically minimalist (2010)4. ExtJS: requires license, much “heavier” framework (2007)5. Others: Knockout, SproutCore, Spine, Javascript MVC, GWT, Batman, etc all once popular in 2011-

2013 probably aren’t safe options for 2015-2019+ development

JavaScript MVVM & MVC framework options

jQuery: library/tool (not a framework) and increasingly unnecessaryReact (by Facebook): only addresses the “View” part of MVC

1. AngularJS:a. Pros: more approachable and simpler syntax. More flexible than Ember, more complete than

Backbone. No 3rd party dependencies. More learning materials & larger community.b. Cons: more concepts to learn in order to master.

2. Ember: a. Pros: stricter framework, less concepts. Potentially more performant data-binding.b. Cons: less documentation/community, requires jQuery & Handlebars (larger)

3. Backbone:a. Pros: lightweight, easy learning curve, very flexible.b. Cons: you’ll build your own framework on top of it. Routing, templates, dependency injection,

two-way binding etc. Requires jQuery & Underscore.

Frameworks narrowed down

AngularJS is (or was) the 3rd-most starred project on Github. Source: AirPair.com, April 2015

Community comparison

Search interest over time

Job listings: Front-end

Job listings: Front-end (cont.)

Job listings: Expanded

Job listings: Expanded (cont.)

AngularJSby Google

● Built for CRUD apps: not games or GUI editors.

● A complete client-side solution: guides developers through full process and best practices of building an app.

● Opinionated: serves as a starting point for how apps should be built.

● Simplifies development by providing a higher level of abstraction at the cost of flexibility.

● All code in an app should be testable

● Less boilerplate: “Make common tasks trivial and difficult tasks possible”

● Enhances HTML using custom HTML tags/components which trigger JavaScript functionality.

Philosophy

“AngularJS is what HTML would have been, had it been designed for applications”

1. It’s made up of well thought-out components

2. Developer support: Mature documentation, tutorials, blog posts & formal courses.

3. Community is mature & thriving. Many high quality 3rd party modules & expert opinion available.

4. Directives (UI components) are brilliant: also come with a high learning curve (worth it)

5. Continual improvement: recent versions have addressed many key concerns

6. It’s efficient: fairly lightweight

Why AngularJS?

1. Handles low-level DOM manipulation and marshals data to the UI (data binding)

2. Wires MV* app components together with a clean, modular, reusable architecture

3. Templating: supports complex view hierarchies

4. Dependency injection

5. Routing

6. Form data & validation

7. API requests (XHR)

8. Makes i18n convenient (internationalization)

9. Extensible: can integrate with any other JavaScript/HTML/CSS 3rd party component

Key features

1. SEO: Single page apps are un-indexable. Unsuitable for websites or public-facing apps (like Craigslist, Amazon).

2. Difficult to test logic in HTML: ng-repeat, ng-show, etc.

3. Legacy browser support: IE9+

4. Lazy-loading modules: possible but not very easy

5. Maintaining state between page reloads. Cookies, localstorage, AJAX

6. Sometimes, it’s too fast: requires fine-tuning to “feel right” to web users

7. Works best with JSON apis: it’s more difficult to use XML or HTML server responses

8. Doesn’t play nicely with server templating: Smarty, Twig, Liquid, etc.

9. Complexity: directives, prototypical inheritance, transclusion, digest, etc. can be difficult concepts.

Why not AngularJS?

All of these gotchas are overcomeable with varying degrees of work. Many of these apply to all SPAs.

● In alpha without a release date (details expected soon at ngEurope in Oct).

● Angular 1.x will be supported for 2 years after 2.0 release.

● Lighter (and simpler?) than Angular 1

● Big gamble: great ideas, very different. “Built for the browsers of the future”.

● Responding to changes in browsers: the web standards body is adding much of what AngularJS makes possible to browsers. So, Angular 2.0 will do what future browsers won’t.

● Typed JavaScript: embraces TypeScript, a typed superset of JS by Microsoft.

Angular 2.0: bold as hell

Takeaway: My bet is Angular 2.0 will rock… eventually. New apps: Angular 1.x with an eye on 2.0 changes. Existing app rewrites: hold off

1. Written in ES6 (with class-based inheritance), transpiles to ES5 for current browser compatibility. 2. Moving away from the (confusing) JS prototypical inheritance model3. No more controllers or $scope (concepts remain)4. Simpler directives5. Uses ES6 modules instead of custom Angular modules6. No longer includes jQuery by default7. Unidirectional data flow (no more two-way binding, more explicit, similar to React?)8. No more $scope.$apply9. Better support for touch animations

10. New router11. New persistence layer12. … and more

Some Angular 2.0 details

1. Bower: web package manager for 3rd party project dependencies.2. Grunt: build automation tool. Automate tasks like code minification/obfuscation, code-quality

analysis, versioning, vendor-prefixing, unit testing, releasing, and so much more.3. SASS (not LESS): Always use a CSS preprocessor these days. SASS seems to have won out over

LESS, with Bootstrap switching.4. gzipping & CDNs (CloudFlare for easy setup): low-hanging fruit for much faster load times.5. Yeoman: scaffolding tool for new apps.6. Firebase: solid database-as-a-service, recently acquired by Google (not only for Angular)7. Amazon S3 + CloudFlare: extremely easy app hosting for 100% static apps8. Babel: ES2015 compiler (e.g. use classes now)

Tools that go well with AngularJS

ReactJS by Facebook

● (-) Alpha software (0.13.x): still has breaking changes● (-) Tiny community & docs: you’ll be trailblazing● (-) Has a learning curve: may be worth the complexity● (+) Not too difficult to use: once you understand● (+) Interoperable: can be used with AngularJS and other frameworks● (+) Performance impact: needs to be demonstrated. Seems negligible for

typical CRUD apps without large quantities of data in the client.● (?) Questionable philosophy: HTML in JS? Worth considering

React by Facebook: a virtualized DOM

Core concept: put your HTML into your JavaScript. When your data changes, React performs a diff on changed HTML and only updates the elements that were affected.

Pros: 1.) faster HTML updates, 2.) “easier to understand UI components because they’re in one file”

Hybrid mobile appsJust not quite there yet

1. Apache Cordova (PhoneGap): runs in a webview.2. Appcelerator Titanium: JS interpreted at runtime, connects to native

bindings (no webview). Includes ecosystem of app support tools.3. React Native: ReactJS, for mobile. Technically similar to Titanium.4. Ionic Framework: commercial product that uses Cordova+AngularJS.

Growing quickly and worth a look. Includes ecosystem of app support tools, including pre-built UI controls.

HTML5 hybrid mobile app options

Takeaway: I still wouldn’t advise using web tools to create mobile apps, because at a high level:

1.) Creating a native mobile app just really isn’t that hard if you’re serious about it.2.) iOS and Android are too different and evolve too quickly to keep up with on an abstracted platform.

1. Angular 2.0 breakdown: https://www.airpair.com/angularjs/posts/preparing-for-the-future-of-angularjs2. How to write good controllers: http://toddmotto.com/rethinking-angular-js-controllers/3. Performance tips: https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications4. More perf. tips: http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/5. JS Style guide: https://github.com/airbnb/javascript6. Why not to use Angular: https://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc997. Angular alts: https://medium.com/este-js-framework/what-i-would-recommend-instead-of-angular-js-62b057d8a9e8. Ember v.s. Angular: https://www.quora.com/Is-Angular-js-or-Ember-js-the-better-choice-for-JavaScript-frameworks9. Me! I’m happy to help anybody in the CTO Forum

Thank you! Here are some resources