Taalontwikkeling en taalproblemen Marjolijn van Weerdenburg 13 december 2007.
Future-Friendly Angular Applications by Nick Van Weerdenburg & Yuri Takhteyev
description
Transcript of Future-Friendly Angular Applications by Nick Van Weerdenburg & Yuri Takhteyev
rangle.ioThe Web Inverted
FUTURE PROOF ANGULARJS
CEO, rangle.io
Nick Van Weerdenburg
ARCHITECTURE
CTO, rangle.io
Yuri Takhteyev
Technology Evolution and Durable Code
• The future is always different then expected.
• Migrations are challenging.
• Standards-based solutions work best.
• Strong core, flexible edges.
J2EE, Rails, Python 3.0, ActionScript 3.0KEY POINT
Plain JavaScript is the starting point for
reusable code across frameworks or across time
As more of your code runsin the browser, this becomes
essential- legacy servertechniques don’t work
(yet)
Three Year Plans – Good or Bad?
• complex requirements
• competing, conflicting requirements
• configurable
• long-lived
• cross-system
Enterprise/Large/Complex Software
The Future-Proof Solution?
Standardize on IE6!
Alternate Solutions?
Future-Proofish Architectures
With a Solid Pragmatic Cost-Benefit Approach
Does Angular Pass This Test?
•D.R.Y
•Structure
•Testability
Soul of Angular (any version)
• Dependency Injection
• Data binding
• Direectives
• Router
• Filters
• Animations
Features That Don’t Change• Forms
• Expressions
• Protractor
• Karma
• Mocks
• Mobile
• Material Design shipping with 2.0
• Improved Router
• Performance and Scale
• Standards (ES6)
• Components (merge controllers and directives)
What’s New
• Well Validated
• Lot’s of prototyping (DI, templates, etc.)
• Lot’s of new ideas testing in AngularDart (used in several internal AngularJS projects)
• External design docs and discussions
• Strong focus on scalability and large project support…this is a benefit that’s gained by migrating from 1.3 when needed
Current Angular 2.0 Status
Migration EffortFEATURE CHANGE TYPE NOTES VALUE RISK EFFORT
DI Decl ES6, true dependency management, Query HIGH LOW LOW
Modules Decl new syntax, declare dependencies. HIGH LOW LOW
Directives Decl Components, DDO->Classes, Leverage DI HIGH LOW MED
Scope Decl Similar to controller As syntax HIGH LOW* MED*
Controllers Decl Now in components (classes) HIGH MED* MED*
Messaging Imp New model is easier, but different (DI) HIGH MED LOW*
Router Decl 3rd party router can still be used MED LOW* LOW*
Angular 2 Value-Risk Matrix
But What About Angular 3.0 And Other Future
Innovations?
Best Practices for TodayThings you should be doing regardless of
your time horizon.
• Won’t cut it as your “model”
• Lead to entangled code
• Complicate testing
• Can hurt performance
Angular’s Nested Scopes
� Use sparingly.
Code that can be written without referring to a controller’s scope should be written this way and should be placed in a service.
“
• Easy to reason about
• Easy to test
• Avoid entanglement
• Dependency injection (DI) is great
Services
� Use aggressively.
• Use “controller as”
• Use isolated directives
When Not Using Services
But what about
Will those methods future-proof your application?
Angular 2.0?
• Your entangled controllers might be a write-off (though, more on this later)
• “Controller as” controllers might be ok
• You should be able to reuse your services (with a bit of work)
If You Ever Migrate from Angular 1.x
• Angular-style DI is easy to stub out
• You can then use Angular services without Angular
• You will need to supply the dependencies, though
Services Are Just Modules with DI
• Allows you to stub out Angular code
• You still get the benefit of DI
Nebular
https://github.com/rangle/nebular
� Treat as a proof of concept
Converting a Service
var angular = require('nebular');
angular.module('koast-logger', []) .factory('_koastLogger', [ function () {
Loading a Service
require('./src/core/koast-logger/koast-logger-service');
var nebular = require('nebular');
nebular.instantiateService('_koastLogger');
var logger = nebular.getService('_koastLogger');var log = logger.makeLogger('foo');
log.info('Hello');
Faking Dependencies
nebular.setService('$q', Q);
More ModularityEnforcing more modularity will make your life simpler. It also has some immediate
architectural benefits.
• Write your code as plain JavaScript modules
• Export them an AngularJS services
• Inject AngularJS dependencies if needed
• But: you might reinvent Angular's DI!
Consider Using Plain JavaScript
• Build a package of "Nebular" services
• Inject actual Angular dependencies
• Export as a single Angular service
• Enjoy more isolation
• Use with or without Angular 1.x
Alternative: Wrapped Services
Example
require('./src/koast');var nebular = require('nebular');
angular.module('koast') .factory('koast', function($q, $http, $log, $window, $location, $timeout) { nebular.setService('$q', $q); nebular.setService('$http', $http); nebular.setService('$log', $log); nebular.setService('$window', $window); nebular.setService('$location', $location); nebular.setService('$timeout', $timeout); nebular.setService('_', require('lodash')); nebular.setAngularUtils(angular); nebular.instantiateService('koast'); return nebular.getService('koast'); });
Multi-Framework Applications
We need to be able to build applications mixing Angular 1.2, Angular 2.0, and
NextBigThingJS
• Encapsulation
• Confinement
Isolation
• Separate JavaScript contexts
• Components communicate via postMessage()
• Usually used for including 3rd party content
• But could be used for building components
• Requires some plumbing
Sandboxed iFrames and WebWorkers
Demo
https://github.com/rangle/multi-framework-app
• iFrame an Angular component
• Represent it as a directive in the parent context
• Or as a web component
Proxy Interfaces
• Shadow DOM helps with encapsulation, somewhat
• Combine with iFrames for true isolation
• Useful for smaller units
• Can provide a nice wrapper for iFramed widgets
Web Components
What’s Your Time Horizon?
rangle.ioThe Web Inverted
CEO, ranale.ioNick Van Weerdenburg
THANK YOU!
@n1cholasv
n1cholasv
CTO, ranale.ioYuri Takhteyev
@qaramazov
yuri
Image Credits
by tromal by Orange County Archives by NASA Blueshift by gazeronly
by theilr by Bart Everson by David Evers