Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Angular2 - In Action

3.228 visualizaciones

Publicado el

A short presentation about:
- basics of angular2
- build application with jspm and system.js
- pre-render angular2 application

Publicado en: Educación

Angular2 - In Action

  1. 1. Angular 2 IN ACTION
  2. 2. NG2 INTRODUCTION Part 2
  3. 3. TSD
  4. 4. TSD npm install tsd -g tsd install angular2/angular2 angular2/router rx es6-promise
  5. 5. TSC tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js
  6. 6. Start
  7. 7. HTML <!doctype html> <html lang="en"> <body> <my-app></my-app> <script src="js/bundle.js"></script> </body> </html>
  8. 8. APP.TS - IMPORTS /// <reference path="../../typings/tsd.d.ts" /> import { Component, View, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES, provide } from 'angular2/angular2'; //...
  9. 9. APP.TS - COMPONENT @Component({ selector: 'my-app', template: APP_TEMPLATE, directives: [HeaderComponent, ROUTER_DIRECTIVES], provides: [PostsStorage, Core] }) class AppComponent {}
  10. 10. APP.TS - BOOTSTRAP bootstrap(AppComponent, [ // Common PostsStorage, Core, // Ng2 ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}) ]);
  11. 11. Templates
  12. 12. TEMPLATES - IMPORT import { APP_TEMPLATE } from './templates';
  13. 13. TEMPLATES - EXAMPLE COMPONENT class AppComponent { text:string = 'hello'; typing($event){ this.text = $event.target.value; } }
  14. 14. TEMPLATES - CODE <h1>Bound Textbox</h1> <input [value]="text" (keyup)="typing($event)" /> {{text}}
  15. 15. TEMPLATES - SYNTAX <todo-cmp [model]="my_value"></todo-cmp> <input [ng-model]="todo.text" (ng-model-change)="todo.text=$event" ></input> <input [(ng-model)]="todo.text"></input>
  16. 16. TEMPLATES - SYNTAX <video-player #player></video-player> <button (click)="player.pause()"> Pause </button> <input #i> {{i.value}}
  17. 17. PIPE
  18. 18. PIPE - USAGE @Pipe({ name: 'publicName' }) class ClassPipeName implements PipeTransform { transform(value: number, args: any[]) { //… } }
  19. 19. PIPE - USAGE @Pipe({ name: 'publicName' }) class ClassPipeName implements PipeTransform { transform(value: number, args: any[]) { //… } }
  20. 20. Routing
  21. 21. ROUTING - @RouteConfig import { AboutComponent } from './components/about/index'; @RouteConfig([{ path: '/About/:id', component: AboutComponent, name: 'About' }]) class AppComponent {}
  22. 22. ROUTING - @RouteConfig export class AboutComponent { id: number; constructor( @Inject(RouteParams) params: RouteParams) { this.id = params.get('id'); } }
  23. 23. ROUTING - TEMPLATE <nav> <ul> <a [router-link]="['./About', {id: 1}]" href="#" class="list-group-item">About</a> <a [router-link]="['./Home']" href="#" class="list-group- item">Home</a> <a [router-link]="['./PostsList']" href="#" class="list- group-item">Posts list</a> </ul> </nav> <route-transclusion name="main"></route-transclusion>
  24. 24. LINKS react / angular / angular2 ng-conf ● https://github.com/htdt/ng2-jspm ● https://github.com/thelgevold/angular-2-samples ● http://www.syntaxsuccess.com/angular-2-articles ●
  25. 25. BUILDING / COMPILE / TRANSCRIPTION Part 2
  26. 26. Browserify
  27. 27. ROUTING - TEMPLATE var browserify = require('gulp-browserify'); gulp.src('build/ts/app/app.js') .pipe(browserify({ insertGlobals : true, debug : !gulp.env.production })) .pipe(gulp.dest('./dist/app'))
  28. 28. NO
  29. 29. JSPM
  30. 30. JSMP “jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader” React applications with JSPM
  31. 31. JSMP ● ES6, AMD, CommonJS and globals) ● npm and GitHub... ● load modules as separate files ● optimize into a bundle ● realtime transcript
  32. 32. System.js
  33. 33. SYSTEM.JS - PRODUCTION npm install -g jspm jspm init jspm install angular2/angular2 jspm bundle-sfx --minify zone.js + whatwg-fetch + reflect-metadata + src/app/app dist/js/bundle.js
  34. 34. SYSTEM.JS - DEVELOPMENT <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('reflect-metadata') .then(function(){System.import('zone.js')}) // .then(function(){System.import('es5-shim')}) <- LOL .then(function(){System.import('es6-shim')}) .then(function(){System.import('whatwg-fetch')}) .then(function(){System.import('src/app/app')}); </script>
  35. 35. SYSTEM.JS - PRODUCTION <!doctype html> <html lang="en"> <body> <my-app></my-app> <script src="js/bundle.js"></script> </body> </html>
  36. 36. Gulp
  37. 37. GULP - TEMPLATES var ng2Template = "export const <%= template.url %> = '<%= template.escapedContent %>';n"; function fnRename(templateUrl, templateFile) { var pathParts = templateUrl.replace('.tpl.html', '').split('/'), folder = pathParts[pathParts.length - 2], file = pathParts[pathParts.length - 1], name = (folder ? folder + '_' : '') + file + '_TEMPLATE'; return name.toUpperCase().replace(/-[.-]/g, function (match) { return '_'; }); } } /*...*/.pipe(ngHtml2Js({ rename: fnRename, template: ng2Template })
  38. 38. PRERENDER Part 3
  39. 39. Metadata
  40. 40. Metadata - HTML <!doctype html> <html lang="en"> <head> <title>{{ no.work.here }}</title> <head> <body> <my-app></my-app> <script src="js/bundle.js"></script> </body> </html>
  41. 41. METADATA - SERVICE export class HeadDOM { private titleDom:HTMLElement; get title():string { return this.titleDom.innerText; } set title(title:string) { this.titleDom.innerText = title; this.ogTitle = title; } //… }
  42. 42. Prerender.io
  43. 43. PRERENDER.IO - COST
  44. 44. PRERENDER.IO - GITHUB https://github.com/prerender/prerender
  45. 45. Webrender-service
  46. 46. Webrender-service - Overview ● (+) Render png file ● (+) Render pdf file ● (+) Render html file ● (+) No-overwrite js functions ● (+) Servers whitelist ● (+) Token security ● (-) Legacy code ● (-) Small community ● (-) No-good tested ● (-) Use node-babel ● (-) Alpha
  47. 47. Webrender-service - Todo ● Remove babel (problems with debugging) ● Write unit tests ● Remove cache (I recommend to use solution like varnish)
  48. 48. WEBRENDER SERVICE (ALPHA) - GITHUB https://bitbucket.org/spozoga/webrender-service
  49. 49. PhantomJS
  50. 50. PhantomJS - Error #1 Map is a pretty new structure. Use npm install harmony-collections -- save-dev and add "node_modules/harmony-collections/harmony- collections.min.js", to the karma config.
  51. 51. PhantomJS - Error #2 ORIGINAL EXCEPTION: TypeError: 'undefined' is not a function (evaluating 'window.requestAnimationFrame(callback)')
  52. 52. PhantomJS - Error #3 RangeError: Maximum call stack size exceeded. at quote (/Users/spozoga/dev/prerender/node_modules/phantom/shim.js: 1065) ………..
  53. 53. DevOps
  54. 54. VARNISH
  55. 55. PRERENDER.IO - GITHUB https://github.com/prerender/prerender
  56. 56. PRERENDER-VARNISH - GITHUB https://github.com/MWers/prerender-varnish
  57. 57. The end
  58. 58. Sebastian Pożoga sebastian@pozoga.eu

×