Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Programación con ECMA6 y TypeScript

775 views

Published on

Revisión de conceptos fundamentales para la creación web y empresariales con JavaScript(ECMA 6 y TypeScript).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Programación con ECMA6 y TypeScript

  1. 1. Mejorando la calidad de código con ECMA 6 y TypeScript Víctor Orozco 25 de marzo de 2020 @tuxtor 1
  2. 2. JavaScript 2
  3. 3. Clientes JavaScript 1995-2012: JavaScript es malo! - Developer X con conocimientos de otro lenguaje que no sea JS. • Orientado a hacks • Imperativo (manipulación DOM) • 2009: Node.js • 2009: CoffeeScript • 2011: Dart • 2012: TypeScript • 2015: ECMA 6 3
  4. 4. Clientes JavaScript/HTML5 • Rich clients = HTML+JS+CSS3 • MVVM +- MVC del lado del cliente • JSON/XML • Rest - Request-response • Websockets - Full duplex 4
  5. 5. Arquitectura 2015 5
  6. 6. Arquitectura 2017 6
  7. 7. Arquitectura 2019 7
  8. 8. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo 8
  9. 9. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin 8
  10. 10. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components 8
  11. 11. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components • AngularJS, Knockout.js, Ember.js 8
  12. 12. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components • AngularJS, Knockout.js, Ember.js • 2013: React, 2014: Vue (DIY/Biblioteca) 8
  13. 13. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components • AngularJS, Knockout.js, Ember.js • 2013: React, 2014: Vue (DIY/Biblioteca) • 2015: Oracle JET, 2016: Angular, 2019: Nuxt.js (Framework) Clave MVVM 8
  14. 14. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo 9
  15. 15. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin 9
  16. 16. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components 9
  17. 17. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components • AngularJS, Knockout.js, Ember.js 9
  18. 18. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components • AngularJS, Knockout.js, Ember.js • 2013: React, 2014: Vue (DIY/Biblioteca) 9
  19. 19. Clientes JavaScript • AJAX (Microsoft) • jQuery, YUI, Dojo • GWT, Icefaces/Primefaces, Vaadin • HTML5, CSS3, WebSockets, WebRTC, HTML Components • AngularJS, Knockout.js, Ember.js • 2013: React, 2014: Vue (DIY/Biblioteca) • 2015: Oracle JET, 2016: Angular, 2019: Nuxt.js (Framework) Clave MVVM 9
  20. 20. Clientes JavaScript - Resumen • JS, TS, Dart, CoffeeScript (lenguajes) • Angular, Nuxt.js (frameworks) • Webpack, Parcel, Brocoli (SCM) • npm, yarn (Dependencias) 10
  21. 21. TS
  22. 22. TypeScript • Microsoft • Transpila TS -> JS • Idea general: JS + Tipos + ES.Next • Todo código JS es código TS valido • El código JS es difícil de escalar a menos que sean genios 11
  23. 23. TypeScript vs JavaScript • debug • Autocompetion • Refactoring • Navegación en los IDEs • Linting 12
  24. 24. TypeScript transpiler • Resultado final es JS idiomatico • Por defecto siempre produce salida • Superset • Tipado estático 13
  25. 25. TS vs JS 14
  26. 26. JS en CLI 15
  27. 27. TypeScript instalación • Node.js • Gestor de paquetes • Editor o IDE (VSCode/IntelliJ IDEA) npm i n s t a l l −g t y p e s c r i p t npm view t y p e s c r i p t v e r s i o n Luego t s c −v 16
  28. 28. TypeScript foo.ts TS Compiler foo.js 1. tsc 2. Webpack 3. ng-cli 17
  29. 29. TypeScript - Ejercicio 1 t s c ex1 . t s 1 var a = 123 2 a.trim() 18
  30. 30. TypeScript - Ejercicio 1 t s c ex1 . t s −−watch 1 var a : string = 123 2 a.trim() 19
  31. 31. TypeScript • Type annotations • Type inference • Compile time type checking • Optional and default params • Classes • Interfaces • Structural typing • Arrow function expression • Enums • Generics • Modules • Tuple types • Union types and type guards 20
  32. 32. TypeScript - Típos • Object - any • void - void • boolean - boolean • integer, double . . . - number • String, char - string • Type[] - type[] 21
  33. 33. NPM
  34. 34. NPM • Package manager • Task runner (invoker) • Fuerte por la comunidad Node.js • package.json 22
  35. 35. NPM mkdir ex2 cd ex2 npm i n i t Package.json 23
  36. 36. NPM - Package.json 1 { 2 "name": "ex2", 3 "version": "1.0.0", 4 "description": "Foo package", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo "Error: no test specified" && exit 1 " 8 }, 9 "author": "", 10 "license": "ISC" 11 } 24
  37. 37. NPM - Paquetes https://npmjs.org npm i n s t a l l cowsay l s −l node_modules 25
  38. 38. TypeScript - Ejercicio 3 cowsay.ts 1 var cowsay = require("cowsay"); 2 3 console.log(cowsay.say({ 4 text : "I'm a moooodule", 5 e : "oO", 6 T : "U " 7 })); node cowsay . j s 26
  39. 39. NPM - Resumen • npm install • npm install -g • npm install –save • require(); • npm uninstall 27
  40. 40. ECMAScript 6 + TS
  41. 41. ES6 http://es6-features.org/ 28
  42. 42. Classes 1 c l a s s Car { 2 constructor ( color , doorQty ) { 3 t h i s . color = color ; 4 t h i s . doorQty = doorQty ; 5 } 6 7 run () { 8 console . log ( ' I am the '+ t h i s . color + ' car and I have ' + t h i s . doorQty + ' doors ' ) 9 } 10 } 11 12 var c1 = new Car (”Red” , 4) ; 13 c1 . run () ; 29
  43. 43. Classes TS 1 c l a s s Car { 2 color : s t r i n g ; 3 doorQty : number ; 4 constructor ( color : string , doorQty : number) { 5 t h i s . color = color ; 6 t h i s . doorQty = doorQty ; 7 } 8 run () { 9 console . log (` I am the ${ t h i s . color } car and I have ${ t h i s . doorQty} doors `) 10 } 11 } 12 13 var c1 = new Car (”Red” , 4) ; 14 c1 . run () ; 30
  44. 44. Arrow function 1 function ScopeTest ( tuxAge ){ 2 t h i s . tuxAge = tuxAge ; 3 t h i s . increaseAge = function () { 4 console . log (” incrementando edad ”) ; 5 t h i s . tuxAge++; 6 } 7 } 8 9 var sTest = new ScopeTest (10) ; 10 setTimeout ( sTest . increaseAge ,1000) ; 11 setTimeout ( function () { console . log ( sTest . tuxAge ) } ,2000) ; 31
  45. 45. Arrow function 1 function ScopeTest ( tuxAge ){ 2 var s e l f = t h i s ; 3 t h i s . tuxAge = tuxAge ; 4 t h i s . increaseAge = function () { 5 console . log (” incrementando edad ”) ; 6 s e l f . tuxAge++; 7 } 8 } 9 10 var sTest = new ScopeTest (10) ; 11 setTimeout ( sTest . increaseAge ,1000) ; 12 setTimeout ( function () { console . log ( sTest . tuxAge ) } ,2000) ; 32
  46. 46. Arrow function 1 function ScopeTest ( tuxAge ){ 2 t h i s . tuxAge = tuxAge ; 3 t h i s . increaseAge = () => { //Arrow function 4 console . log (” incrementando edad ”) ; 5 t h i s . tuxAge++; 6 } 7 } 8 9 var sTest = new ScopeTest (10) ; 10 setTimeout ( sTest . increaseAge ,1000) ; 11 setTimeout ( function () { console . log ( sTest . tuxAge ) } ,2000) ; 33
  47. 47. Rest parameters 1 function iTakeItAll ( f i r s t , second , . . . allOthers ) { 2 console . log ( allOthers ) ; 3 } 4 iTakeItAll ( ' foo ' , ' bar ' ) ; 5 iTakeItAll ( ' foo ' , ' bar ' , ' bas ' , 'qux ' ) ; 34
  48. 48. let 1 function scopeTest () { 2 var info = 123; 3 i f ( true ){ 4 var info = 456; 5 } 6 console . log ( info ) ; 7 } 8 scopeTest () ; 35
  49. 49. const 1 const constante = 12345 2 3 const foo = { bar : 123 }; 4 foo . bar = 456; Block scoped 36
  50. 50. Destructuring 1 var rect = { x : 0 , y : 10 , width : 15 , height : 20 }; 2 3 var {x , y , width , height } = rect ; 4 console . log (x , y , width , height ) ; 5 6 var {w, x , . . . remaining} = {w: 1 , x : 2 , y : 3 , z : 4}; 7 console . log (w, x , remaining ) ; 37
  51. 51. Spread operator Como argumentos 1 function foo (x , y , z ) { } 2 var args = [0 , 1 , 2 ] ; 3 foo ( . . . args ) ; Como arreglo (destructuring) 1 var l i s t = [1 , 2 ] ; 2 l i s t = [ . . . l i s t , 3 , 4 ] ; 3 console . log ( l i s t ) ; 38
  52. 52. TS
  53. 53. Compilation context • Colección de archivos a ser analizados por tsc • tsc –init • tsconfig.json 39
  54. 54. Compilation context 1 { 2 ” include ” : [ 3 ”./ f o l d e r ” 4 ] , 5 ” exclude ” : [ 6 ”./ f o l d e r /∗∗/∗. spec . ts ” , 7 ”./ f o l d e r /someSubFolder” 8 ] 9 } 1 { 2 ” f i l e s ” : [ 3 ”./some/ f i l e . ts ” 4 ] 5 } 40
  55. 55. Declaration spaces Type declaration space 1 c l a s s Tuz {}; 2 i n t e r f a c e Tux {}; 3 type Penguin = {}; Pueden ser usados como tipos 1 var foo : Tuz ; 2 var bar : Tux ; 3 var bas : Penguin ; 41
  56. 56. Declaration spaces Variable declaration space 1 c l a s s Tuz {}; 2 var someTuz =Tuz ; 3 var someOtherVar = 123; Pueden ser usados como tipos 1 var foo = 123; 2 var bar : foo ; // ERROR 42
  57. 57. Modulos • AMD - RequireJS, solamente para browser • CommonJS - Node.js • SystemJS - superado por ES6 modules • ES6 modules Al utilizar módulos, se hace obligatorio el uso de un bundler para paginas web 43
  58. 58. Modulos TS • Basado en ES6 modulos • Global module • File module • globals.d.ts 44
  59. 59. File module uno.ts 1 export var penguin = ”Tucs ”; dos.ts 1 import { penguin } from ”./ penguin ”; 2 var bar = penguin ; 3 console . log ( bar ) 45
  60. 60. Modules - Alias Export 1 l e t someVar = 123; 2 export { someVar as aDifferentName }; Import 1 import { someVar as aDifferentName } from './ foo ' ; 46
  61. 61. Modules - Default Export 1 export default someVar = 123; 2 export default function someFunction () { } 3 export default c l a s s SomeClass { } Import 1 import someLocalNameForThisFile from ” . . / foo ”; 47
  62. 62. Modules - Resolución • Por path • Node • ./node_modules/something/foo • ../node_modules/something/foo • Hasta llegar a / 48
  63. 63. TS - Más tipos
  64. 64. Tipos - inline 1 var person : { 2 firstName : s t r i n g ; 3 secondName : s t r i n g ; 4 }; 5 person = { 6 firstName : 'John ' , 7 }; 49
  65. 65. Tipos - any 1 var penguin : any ; 2 3 // Takes any and a l l types 4 penguin = 'Tuz ' ; 5 penguin = 123; 50
  66. 66. Tipos - Generics 1 function reverse<T>(items : T[ ] ) : T[ ] { 2 var toreturn = [ ] ; 3 for ( l e t i = items . length − 1; i >= 0; i −−) { 4 toreturn . push ( items [ i ] ) ; 5 } 6 return toreturn ; 7 } 51
  67. 67. Tipos - Union Type 1 function printText ( text : s t r i n g [ ] | s t r i n g ) { 2 var l i n e = ' ' ; 3 i f ( typeof command === ' string ' ) { 4 console . log ( text . trim () ) ; 5 } else { 6 console . log ( text . j o i n ( ' ') ) ; 7 } 8 } 52
  68. 68. Tipos - Intersection Type 1 function extend<T, U>( f i r s t : T, second : U) : T & U { 2 return { . . . f i r s t , . . . second }; 3 } 4 5 const x = extend ({ a : ” h e l l o ” } , { b : 42 }) ; 53
  69. 69. Tipos - Tuple Type 1 var nameNumber : [ string , number ] ; 2 3 nameNumber = [ ' Jenny ' , 8675309]; 4 5 nameNumber = [ ' Jenny ' , '867 −5309 ']; 54
  70. 70. WebApps
  71. 71. Frameworks • Angular • Vue • React • Nest Si es JS, es TS 55
  72. 72. MicroEjemplo ng new ex6 cd new ex6 ng s e r v e −−open 56
  73. 73. Academik 57
  74. 74. Víctor Orozco • vorozco@nabenik.com • @tuxtor • http://vorozco.com • http://tuxtor.shekalug.org This work is licensed under Creative Commons Attribution- NonCommercial-ShareAlike 3.0 Guatemala (CC BY-NC-SA 3.0 GT). 58
  75. 75. 59

×