@mhevery
Misko welcomes everybody and is very pleased to be here Stresses the fact that we're not creating a new language with AtScript
Goes on posing the question: "Can we make the Angular API a bit more friendlier ?" Advocating a bit more explicit API in order to improve readability in general. Discussing the API in 2.0 and apoligizes for any inconvinience and ask for your input to improve things
Continues on talking about optional types and metadata.
- Typecasting: What if we could apply more typecasting in Angular ? Something that exists in ES4.
- Possible way to go: generate assertions from e.g. similar like AngularDart
- Nominal, Structural type systems.
- Metadata to tell your intentions
- Introspection to check things on runtime, prevents programming errors
Angular is raising what a browser is. Abstraction should empower a developer by providing a more declarative way of programming
Why not build the future today ?
Chances are that types, annotation and introspection will end up in ES7 anyway.
AtScript
built on top of TypeScript to include types & annotation.
AtScript.wraps( TypeScript.wraps( ES6.wraps( ES5 ) ) )
Note: Angular 2.0 will be written in AtScript, but won't require you to write anything in AtScript. If you want, you can still work in JavaScript (ES5)
Roadmap
- right now .ats files, in which the angular source is being written in, gets generated to ( using ATS on top of Traceur )Dart
- An ES5 version
- IDE support is coming, as IDE developers are very interested and most of them already support TypeScript, making AtScript support a lot easier to add
- This will enable static typing
More about AtScript
AtScript preliminar specification
Q&A about AtScript
@igorminar
Showing a, yet another, Todo App. (For Santa! Huuuuge list, two categories: nice & naughty)
- HTML templating quite the same
- New syntax for binding to properties of DOM objects. No longer binding to attributes. (Subtle difference, attribute is what is defined in HTML, property is what is available in the runtime DOM object, there is a one-time mapping from attribute to property on DOM initialization)
- Databinding
- Joke on adding a shopping cart....
- R.I.P. controller & DDO & $scope & angular.module & jqLite ( 2009-2014 )
Showing Web Tracing Framework, a more detailed profiling in Chrome when it comes to angular, more detailed than the current flamecharts built in Chrome profiling.
Will be built later on in Chrome flamecharts.
Why hasn't the Web taken over the mobile world ?
According to Zack:
- Performance
- Ease of wrapping
- Rich interactivity
CSS has it's boundaries. We hit the "declaritive ceiling".
But then again, JavaScript also poses some performance challenges.
Bold claim
Rich interactions which users expect from todays mobile apps – are fundamentally better suited to imperative animations than to declarative animations.
What's on the horizon ?
- because it's built from he ground up it can approach a more native way close to existing 3D technologies like openGL
- Deep webGL integration
- Integration with 2.0 using AtScript
Demo time
https://github.com/zackbrown/sheets
Bind to a css selector to a function for run-time/imperative transformation of css and animate element
More info on Famous Angular
@douglasduteil slides
Takes us back to Angular 1.1.5 were he met ngAnimate But that was cumbersome
Discussing the spec of W3C Web animations
Then he discovered that this wasn't in Angular yet. "Challenge accepted"
Demo time (link)
@mgonto slides
Before Restangular we had a lot of boilerplate.
Proviously on Restangular
- Shows the ng rollercoaster and eventually encounter $resource, with it's limitations and overhead needed to implement a proper RESTful API
- So he started building this thing on top of $resource and discussing the main concept of Restangular
Restangular in the future
Let's walk through the refactoring needed to move towards 2.0.
- Decoupling the one large Restangular.js file into seperate modules
- Using model classes
- Hooks: he's not sure about it yet
- Custom configuration
More info on Restangular 2.0
@erikarvidsson & @Vojtajina
Why ES6 ?
- Easier coding
compatibility list of ES6 features
Classes
- Today - a lot of boilerplate
- ES6 - Easier and shorter syntax in order to ease and remove some overhead while developing with classes, while still based on prototypes.
Modules
- Today: AMD / Commonjs
- ES6: No sync load, static deps, static val, cyclic deps
This scope
- Today: fn.bind(this);
- ES6: Arrow fn , will look outside of the scope for declarations
Default params
- Today: param || default
- ES6: parameter list
Continues on Traceur
Traceur is a JavaScript.next-to-JavaScript-of-today compiler that allows you to use features from the future today.
Module syntax :
import {myModule} from './mymodule.js';
@yearofmoo
Discusses the basics of ngAnimate
Demos on how ngAnimate actually works
So, what's new in 1.3 for ngAnimate ?
- promise based anis, but we need $apply when changing data
- fixes to transitions + keyframes
- fixes to ngshow / nghide - no need to apply display
- 3rd party staggering
- ng-animate-children – will go in depth later on
- Classes - combined and resolved to one aimation
- Inline styling
- shows a demo on a map 💥
- In the demo the directive handles the logic and ngAnimate is responsible for the animation
What else ?
- What about (group) sequences ? Too messy if done in CSS
Shows demo of possible solution: ngAnimateLayout (ng-animate-sequence)
@simpulton
Why are we here ? We love to create things.
Mentions "Lean Startup" by Eric Ries.
I love everything that speeds me up
Firebase overview
Backend as a service with realtime capability and a world class hosting solution that you can deploy in a second (NOW BY GOOGLE)
Shows Viewnicorn demo code here
official binding of Firebase endpoint with Angular Model to 3-way data-binding in realtime
Shows 3 demos code here
Free Firebase account http://bit.ly/lukas-friend
promo code: nglukas1 for 1 month production for free
@CarmenPopoviciu & @PascalPrecht slides: http://slidedeck.io/PascalPrecht/dont-stop-thinking-about-tomorrow
Giving an overview of web components
Pascal
Back in 2008 when Backbone.js was cool, we got some of these stuff for the first time
- HTML Templates
- Shadow DOM
- Custom elements
- HTML Imports
But how does Angular deal with custom elements ? Binding?
- Today you can use ngBindPolymer
- You can pass data from Angular to Web Components and vice versa using Mutation Observers and event listeners
- Showing code
Discussing binding to properties and events
Tomorrow with AngularJS 2.0 you will use [property]=... and (method)=... binding to easly communicate between angular and a webcomponent
@marcysutton slides
Everyone can perceive, understand, navigate, and interact with the Web, and they can contribute to the Web.
Accessibility in Angular Apps
Write meaningful HTML
- Consists of roles, states and properties
- Enable the keyboard, else you will the panda gets angry...
- Handle focus. If you want to remove the blue outline, don't forget to replace it with something meaningful. Make the panda happy!
- Alert the user. By easily adding attributes you can alert the user about state changes (Logged in, new search results, session expired etc )
- How it's done in Material Design
- You can coverage your code with
- Labels
- ARIA Roles
- Watched ARIA Properties
- Interactions
Giveaway: Chrome tool to audit your page chrome://accessibility/
@jelborn Slides
Regarding Angular 1.x
Because next monday we'll have to get back at our day jobs using current versions of Angular
Design patterns & Angular
- Traditional patterns && OO patterns
- Services = Injected Singletons
- Cache for app level shared data
- Facade for browser and 3rd party apps
- Factory for instantiating other objects (based on shared init config)
- Data binding, is basically an implementation of the traditional observer pattern
- Inheritance for services & controllers
- Patterns for creating clean maintainable applications
- Polymorhpism and Directives
- Anti-patterns
- War and peace controllers. They're too long. Keep only the business logic in, and move the rest into services for example.
- Too long/complicated link function
- Using services to store "per page" state and clearing upon route change
- Magical Prototype Chain Dependency
Focus less on "is this this the angular way?"
Focus more on "is this good software?"
@djsmith42 slides
Prevent Problems and upscale your apps with $q
Advantages
- Parallelizable
$q.all( callArray ).then(); - Composable (easy chain promise)
- Dynamic
- Great for handling errors and corner cases
promise.then( function happyPath() {...}, function handleError(){ ... }); - $q is aware of the digest loop of Angular
if you resolve a promise the callback is called only after the digest loop is finished)
Promises are Everywhere
- Even jQuery has them ;-)
- Q
- Bluebird
- Native promises coming soon
@woloski @mgonto @auth0
Out of the box security in Angular
Handle identity management
- on almost all possible development platforms (choose your app type)
- together with many identity providers (socialmedia or generic backend services)
Demo time
The code is a step-by-step tutorial seperated by branch
@auser slides
Code at https://github.com/fullstackio/ng-game
Why build a game with Angular ?
- Games are often more than a canvas
- Webapps are great at powering these
Showing interesting use of:
- Browserify to package and load module with CommonJS syntax (like nodejs require ...)
- $injector to dynamically / imperative load services without declaring explicit dependency
- hook of $destroy event to correctly free object (cleanup game manager)
- ioLoader module to wrap and handle socket.io for runtime comunication with backend (keep gamers in sync)
@briantford slides
Sometimes you have no clue as a developer why nothing or a certain thing happened
Try picking out a typo ng-clock in several lines of code!
Can we do better ? Should we do more static validation or even runtime validation ?
Yes we should.
Solution: ngHint
Runtime hinting for Angular. Suggests and hints on improvements in your code.
- typo’s
Found ng-clock. did you mean ng-click? - unused modules
- deprecated API’s
- naming conventions
- great improvement for CI
New Batarang
- More simplified
- ngHint integration
Roadmap, personal wishes
- Performance hints
- Hints for when upgrading for example from 1.2 to 1.3
- Brad Green: Angular 1.3 support for 1,5 - 2 years after Angular 2.0 release
- AngularDart will use ShadowDom
- IE8 support is only in 1.2.x
- Angular 2.x will only support evergreen browsers
- new Angular Router will be back ported to 1.3 just as a module
- Actually no migrate path from 1.x to 2.0 Igor: "write best code"
- maybe start using Traceur to handle ES6 module and class syntax (they use it internally)
- follow AngularJS 2.0 meetings note to keep in touch with news / demo / future direction etc...
- They choose Traceur and not Typescript for easily "hook" on it to generate Dart and JS code from the same source code and for ES6 syntax support
- End of the year WebMaster Tools announced that they will crawler and execute javascript so NO MORE need to pre-render serveside page/code for SEO Angular Site
- Even startup time will improve in Angular so no more need to "pre-compute" data serverside or other
- In AngularJS 2.0 there will be NO $apply because they will use Zone.js
- Dirty Checking vs Object.Observe angular will continue using dirty check because right now the benchmark gives better results (12.000 check / sec), but this will be pluggable and may change in future...
- Migration guide from 1.2 to 1.3 on angular docs site
- Lazy loading in Angular 2.x will use ES6 module system
- package manager (npm , bower) there will be some guide to use it in 2.0
- ngAria and Material design currently has some perf problem and not complete
- maybe in future Protactor will have some test for check Accessibility done right
- plan to port Material Design logic (not directive) in other project like Ionic to share/handle common logic/infrastructure and choose different UX implementation
- Material design is currently in live change (based on users feed) and the angular implementation will keep in touch with this change and will provide us a library for that "Widget UX"