Downloaded 19 times
![@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/75/Angular-19-2048.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/75/Angular-24-2048.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/75/Angular-26-2048.jpg)
![1 <div
2 tabIndex="1"
3 [label]="hint"
4 (slide)="doSomething()">
5 </span>](https://image.slidesharecdn.com/angular-180524150018/75/Angular-27-2048.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/75/Angular-35-2048.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/75/Angular-39-2048.jpg)
Angular
- 1. Keynote September 27, 2016 JulesKremer @jules_kremer Miško Hevery @mhevery Stephen Fluin @stephenfluin
- 2. One framework Mobile &desktop
- 3.
- 4. Source: State ofOctoverse 2016 Contributors
- 5. 1 0.5 0 Angular 1 Oct 2015 Angular1 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.
- 9. Declarative Templating Change Detection DependencyInjection Component Model Ahead-of-Time Compilation DOM Independence Angular Core
- 10. Angular Material i18n Router Forms Animations ngUpgrade Left Nav Top Nav MainView Angular Extensions
- 11. Angular CLI by Angular AuguryLanguage Services Developer Tools Protractor
- 12.
- 13.
- 14. Performance is not asingle number First Time Render Change Detection
- 15.
- 16. HTML CSS @Ann HTML Compiler & Expression Parser DI Runtime View Runtime Change detection Runtime YourApplication Renderer Interpreted CD / View
- 17. Build Step HTML CSS @Ann HTML Compiler & Expression Parser DIRuntime View Runtime Change detection Runtime Your Application Renderer Generated CD / View
- 18.
- 19. @Component({ template: 'Hello {{name}}!' }) classGreeter { name: string = 'World'; } while(r) { var v=r.obj[r.prop]; if(v!=r.last) { r.node.textContent = r.last = v; } r = r.next; }
- 20.
- 21.
- 22.
- 23. @Component({ template: 'Hello {{name}}!' }) classGreeter { 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 (/wdev-mode check) Top to bottom data flow CheckAlways Detached OnPush OnDirty (Before/After)ChildInit (Before/After)ChildChecked (Before/After)ContentInit (Before/After)ContentChecked
- 29.
- 30. Build Step HTML CSS @Ann HTML Compiler & Expression Parser DIRuntime View Runtime Change detection Runtime Your Application Renderer Generated CD / View
- 31. Serialize RendererDeserialize ● ApplicationLogic ● XHR ● Rendering ● Animations
- 32. Benchpress Execution Time Render Time GCPressure Update Speed
- 33. Ben Dilts Co-founder &CTO Ryan Stringham Senior Engineer Angular 2 Lead
- 34. One of thefirst rich graphical applications on the web Hand-written Javascript (ES5)
- 35. Why Angular 2? <divclass="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 butthe 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
- 40.
- 41.
- 42. Angular 2 editorLegacy editor AOT compiler Ahead-of-time template compiler
- 43. AOT compiler Closure advanced compilation Ahead-of-time templatecompiler Angular 2 editor Legacy editor
- 44. AOT compiler Closure advanced compilation 27KB Hello WorldApp! Ahead-of-time template compiler Angular 2 editor Legacy editor
- 45.
- 46.
- 48.
- 49. Mobile Scenarios Performance mattersmore on Mobile 70% of web usage in many cases
- 50.
- 51. Desktop Scenarios File system& feature integrations Many people use desktop applications every day
- 52. Scenarios Progressive Web AppsMobile Desktop PWA
- 53.
- 54. NPR One Nara Kasbergen @xiehan NPRDeveloper Blog @ https://npr.codes
- 56.
- 58. Our team proposed usingAngular 2 for the rebuild of the webapp.
- 59. We had therare 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 Initialcommit for the new NPR One webapp Angular 2 is in beta2
- 61. March 31, 2016 Officiallaunch of the new NPR One webapp Angular 2 is in beta13
- 63.
- 64. end-to-end tests using Protractor(protractortest.org)
- 66.
- 67. React and Angular2 share many of the same core ideas There is a place in every team's stack for both
- 68. We used ES6instead 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 2ready for production?"
- 70. Check out one.npr.org & decidefor yourself.
- 72.
- 73. Apollo & GraphQL UriGoldshtein @urigoldshtein github.com/urigo
- 74. All the performancewe need
- 77.
- 78.
- 79.
- 80.
- 81.
- 83. Caching results andPreloading
- 84. Caching results andPreloading
- 85. API Documentation Multiple roundtrips and complex joins on the client Server developers decide on how the API would look Dependency on the server API problems
- 86. Make everything feelinstant (Optimistic UI) Small, Open, Client Only, Integrated Gradually Pluggable Immutable Local Cache (Redux, RxJS) Modern Data Protocol - GraphQL Apollo - Network Data Management Library
- 87.
- 88. Client asks forand gets exactly what it needs GraphQL
- 89.
- 90.
- 91.
- 92.
- 94.
- 95.
- 96.