![@Component({
template: 'Hello {{name}}!'
})
class Greeter {
name: string = 'World';
}
while(r) {
var v=r.obj[r.prop];
if(v!=r.last) {
r.node.textContent
= r.last = v;
}
r = r.next;
}](https://image.slidesharecdn.com/angular-180524150018/85/Angular-19-320.jpg)
![while(r) {
var v=r.obj[r.prop];
if(v!=r.last) {
r.node.textContent
= r.last = v;
}
r = r.next;
}
var last_name;
var v = ctx.name;
if(v!=last_name){
nameTextNode
.textContent
= last_name
= v;
}](https://image.slidesharecdn.com/angular-180524150018/85/Angular-24-320.jpg)
![es6_bundle.min.js:2 Uncaught EXCEPTION: Error in app.html:1:5
es6_bundle.min.js:6 Error: OH NOES
at t.Object.defineProperty.get [as name] (es6_bundle.min.js:7)
at HelloWorldFactory.detectChangesInternal (es6_bundle.min.js:8)
...](https://image.slidesharecdn.com/angular-180524150018/85/Angular-26-320.jpg)
![1 <div
2 tabIndex="1"
3 [label]="hint"
4 (slide)="doSomething()">
5 </span>](https://image.slidesharecdn.com/angular-180524150018/85/Angular-27-320.jpg)
![Why Angular 2?
<div class="input-wrapper" lucid-callout>
<input
#dateInput
class="date-input"
type="text"
[value]="value | date:'MM/dd/yy'"
(change)="setDate(dateInput.value)"
[class.error]="dateError"
/>
...](https://image.slidesharecdn.com/angular-180524150018/85/Angular-35-320.jpg)
![templateUrl: './gui.html',
providers: [
MenuItems,
MenuBarItems,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GUI {
Huge win over Angular 1: Change detection](https://image.slidesharecdn.com/angular-180524150018/85/Angular-39-320.jpg)
Angular
- 1. Keynote September 27, 2016 Jules Kremer @jules_kremer Miško Hevery @mhevery Stephen Fluin @stephenfluin
- 2. One framework Mobile & desktop
- 4. Source: State of Octoverse 2016 Contributors
- 5. 1 0.5 0 Angular 1 Oct 2015 Angular 1 Sept 2016 Angular 2 Sept 2016 1.1M 1.2M 623k Based on 30-day active visitors to Angular docs Community Size
- 7. 2 0 0. . Major . Minor . Patch Incompatible Changes Backwards Compatible Bug Fixes semver.org
- 8. STABLE EXPERIMENTAL 20172016 2.0 3.0 4.0 Stability Major Release Cycle
- 9. Declarative Templating Change Detection Dependency Injection Component Model Ahead-of-Time Compilation DOM Independence Angular Core
- 10. Angular Material i18n Router Forms Animations ngUpgrade Left Nav Top Nav Main View Angular Extensions
- 11. Angular CLI by Angular Augury Language Services Developer Tools Protractor
- 12. angular.io/docs
- 14. Performance is not a single number First Time Render Change Detection
- 16. HTML CSS @Ann HTML Compiler & Expression Parser DI Runtime View Runtime Change detection Runtime Your Application Renderer Interpreted CD / View
- 17. Build Step HTML CSS @Ann HTML Compiler & Expression Parser DI Runtime View Runtime Change detection Runtime Your Application Renderer Generated CD / View
- 19. @Component({ template: 'Hello {{name}}!' }) class Greeter { name: string = 'World'; } while(r) { var v=r.obj[r.prop]; if(v!=r.last) { r.node.textContent = r.last = v; } r = r.next; }
- 23. @Component({ template: 'Hello {{name}}!' }) class Greeter { name: string = 'World'; }
- 24. while(r) { var v=r.obj[r.prop]; if(v!=r.last) { r.node.textContent = r.last = v; } r = r.next; } var last_name; var v = ctx.name; if(v!=last_name){ nameTextNode .textContent = last_name = v; }
- 25. var ctx: Greeter = ...; var last_name: typeof ctx.name; var v: typeof ctx.name = ctx.name; if (v != last_name) { ... }
- 26. es6_bundle.min.js:2 Uncaught EXCEPTION: Error in app.html:1:5 es6_bundle.min.js:6 Error: OH NOES at t.Object.defineProperty.get [as name] (es6_bundle.min.js:7) at HelloWorldFactory.detectChangesInternal (es6_bundle.min.js:8) ...
- 27. 1 <div 2 tabIndex="1" 3 [label]="hint" 4 (slide)="doSomething()"> 5 </span>
- 28. Single Pass (/w dev-mode check) Top to bottom data flow CheckAlways Detached OnPush OnDirty (Before/After)ChildInit (Before/After)ChildChecked (Before/After)ContentInit (Before/After)ContentChecked
- 30. Build Step HTML CSS @Ann HTML Compiler & Expression Parser DI Runtime View Runtime Change detection Runtime Your Application Renderer Generated CD / View
- 31. Serialize RendererDeserialize ● Application Logic ● XHR ● Rendering ● Animations
- 32. Benchpress Execution Time Render Time GC Pressure Update Speed
- 33. Ben Dilts Co-founder & CTO Ryan Stringham Senior Engineer Angular 2 Lead
- 34. One of the first rich graphical applications on the web Hand-written Javascript (ES5)
- 35. Why Angular 2? <div class="input-wrapper" lucid-callout> <input #dateInput class="date-input" type="text" [value]="value | date:'MM/dd/yy'" (change)="setDate(dateInput.value)" [class.error]="dateError" /> ...
- 36. Why Angular 2? .input-wrapper { display:inline-block; } .date-input { width:60px; } ...
- 37. Why Angular 2? describe('lucid.view.ng2.common.input.ToggleButton', () => { it('should turn on and off when clicked', ...) it('should be neither on or off when invalid', ...) it('should be neither on or off when disabled', ...) it('should be able to use non-boolean values', ...) ...
- 38. Now: Everything but the WebGL canvas is built in Angular 2
- 39. templateUrl: './gui.html', providers: [ MenuItems, MenuBarItems, ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class GUI { Huge win over Angular 1: Change detection
- 42. Angular 2 editor Legacy editor AOT compiler Ahead-of-time template compiler
- 43. AOT compiler Closure advanced compilation Ahead-of-time template compiler Angular 2 editor Legacy editor
- 44. AOT compiler Closure advanced compilation 27KB Hello World App! Ahead-of-time template compiler Angular 2 editor Legacy editor
- 49. Mobile Scenarios Performance matters more on Mobile 70% of web usage in many cases
- 50. Mobile Scenarios
- 51. Desktop Scenarios File system & feature integrations Many people use desktop applications every day
- 52. Scenarios Progressive Web Apps Mobile Desktop PWA
- 53. Server Scenarios
- 54. NPR One Nara Kasbergen @xiehan NPR Developer Blog @ https://npr.codes
- 56. n.pr/aboutone
- 58. Our team proposed using Angular 2 for the rebuild of the webapp.
- 59. We had the rare opportunity to start a project from scratch, which opened up our options The "all-in-one" nature fit well with our project as a self-contained unit, separate from NPR.org As a team with no embedded QA resource, a high level of test coverage was critical Why we picked Angular 2
- 60. January 31, 2016 Initial commit for the new NPR One webapp Angular 2 is in beta2
- 61. March 31, 2016 Official launch of the new NPR One webapp Angular 2 is in beta13
- 64. end-to-end tests using Protractor (protractortest.org)
- 67. React and Angular 2 share many of the same core ideas There is a place in every team's stack for both
- 68. We used ES6 instead of TypeScript We added Redux-like state management functionality using the plugin @ngrx/store github.com/ngrx/store The React developers have been able to participate fully in all of our code reviews Our hypothesis was correct
- 69. "Is Angular 2 ready for production?"
- 70. Check out one.npr.org & decide for yourself.
- 72. Data GraphQL Real-time ngrx/store ngRedux
- 73. Apollo & GraphQL Uri Goldshtein @urigoldshtein github.com/urigo
- 74. All the performance we need
- 77. Network Latency
- 78. Network Latency
- 79. Optimistic UI
- 80. Optimistic UI
- 81. Optimistic UI
- 83. Caching results and Preloading
- 84. Caching results and Preloading
- 85. API Documentation Multiple round trips and complex joins on the client Server developers decide on how the API would look Dependency on the server API problems
- 86. Make everything feel instant (Optimistic UI) Small, Open, Client Only, Integrated Gradually Pluggable Immutable Local Cache (Redux, RxJS) Modern Data Protocol - GraphQL Apollo - Network Data Management Library
- 87. GraphQL
- 88. Client asks for and gets exactly what it needs GraphQL
- 89. GraphQL Multiple resources in single request
- 91. GraphQL
- 95. Contributors
- 96. Thank You