El documento habla sobre las herramientas utilizadas en el desarrollo de aplicaciones web con JavaScript en 2017, incluyendo lenguajes como JavaScript, CoffeeScript y TypeScript, frameworks como Angular y React, herramientas como Webpack, Babel y npm, y conceptos como el toolchain y el manejo de paquetes. Explica que el ecosistema de JavaScript sigue evolucionando rápidamente y que las nuevas herramientas permiten crear aplicaciones más complejas, aunque algunas siguen siendo complicadas.

1. Desenredando
el toolchain
de JavaScript

2. Jeduan
Cornejo
@jeduan

4. It is practically impossible
to teach good
programming to students
that have had a prior
exposure to BASIC
— Edsger W. Dijkstra

5. JavaScript envenena la
mente de nuestros
jóvenes programadores

6. JavaScript envenena la
mente de nuestros
jóvenes programadores
— Walter Mercado

7. Escribiendo aplicaciones web en
2017
• Lenguaje
• Herramientas
• Librerías

8. Escribiendo una app en 2017
• Lenguaje
• Herramientas
• Librerías Bibliotecas

9. Plataforma

10. Navegadores tienen nuevas
versiones de forma continua
• Chrome: 6 semanas
• Firefox: 6-8 semanas
• Internet Explorer: !
• Edge: Versiones mayores cada ~8 meses
• Safari: Versiones mayores cada ~6 meses
• Chrome Android: Sigue a desktop desde Lollipop (5.0)

11. DevTools FTW
https://developers.google.com/web/tools/chrome-
devtools/

12. Lenguaje

13. CoffeeScript

14. CoffeeScript

15. ECMAScript 2015+
• Una versión nueva del lenguaje cada año

16. TC39
• http://tc39.github.io
• Propuestas pasan por niveles 0 - 4
• Stage 3: Spec completo
• Stage 4: Implementada en 2 browsers

17. ECMAScript 2017
• async / await
• new SharedArrayBuffer()
• '8'.padStart(4, '0')
• https://github.com/tc39/proposals

18. Flow / TypeScript
• Agregan tipos a JavaScript
• TS: Anders Hejlsberg
• Flow: Facebook

19. function sayHi (name: String) : String {
return `Hola ${name}`
}
sayHi(4) // Error

20. Framework

21. VanillaJS para los muy valientes

22. Angular
• Google
• JS en HTML

23. Vue

24. React
• Facebook
• Vistas declarativas
• HTML en el JS
• DOM Virtual

25. AST

27. Linter

28. Eslint

30. • airbnb
• standard

31. Package Manager

32. npm & yarn
• más de 350,000 módulos

33. Transpilador

34. babel
• modulos que usan el AST para convertir sintaxis.
• babel-preset-stage-0 -> TODAS las propuestas
• flow
• recomendación babel-preset-env

35. Bundler

36. Webpack

37. Webpack
• Bundler: archivo + dependencias -> salidas
• Transpilación (Babel, SCSS -> CSS, TypeScript -> JS)
• Relación entre código y assets.
• Hot Module Reload para desarrollar feliz.

38. Webpack
• Complicado de configurar
• Recomendación: create-react-app

39. <link rel="stylesheet" href="/styles/bootstrap.css" />
<link rel="stylesheet" href="/styles/shared.css" />
<link rel="stylesheet" href="/styles/app.css" />
<script src="/dist/react.min.js" ></script>
<script src="/dist/react-dom.min.js" ></script>
<script src="/dist/bootstrap-react.min.js" ></script>
<script src="/dist/app.js" ></script>

40. import React from 'react'
class Comments extends React.Component {
// ...
}

41. import React from 'react'
import shuffle from 'lodash/shuffle'
import addMinute from 'date-fns/add_minutes'
class Comments extends React.Component {
// ...
}

42. import React from 'react'
import shuffle from 'lodash/shuffle'
import addMinute from 'date-fns/add_minutes'
import './comments.css'
class Comments extends React.Component {
render () {
return <div class="comments"></div>
}
}

43. import React from 'react'
import ReactDOM from 'react-dom'
import shuffle from 'lodash/shuffle'
import addMinute from 'date-fns/add_minutes'
import './component.css'
import Logo from '../logo.svg'
class Comments extends React.Component {
render () {
return <div class="comments">
<Logo />
</div>
}
}

44. import React from 'react'
import ReactDOM from 'react-dom'
import shuffle from 'lodash/shuffle'
import addMinute from 'date-fns/add_minutes'
import './component.css'
import Logo from '../logo.svg'
import bgImage from '../images/hero-bg.png'
class Comments extends React.Component {
render () {
return <div class="comments"
style={{backgroundImage: bgImage}}
>
<Logo />
</div>
}
}

45. <link rel="stylesheet" href="/dist/app.css">
<script src="/dist/app.min.js"></script>

46. Webpack: The advanced parts
• Tree shaking, usar sólo partes de la librería.
• CommonsChunk: librerias en un archivo y aplicación en
otro.
• import() para separar aplicación en pequeñas unidades.

47. <script src="/dist/vendor.min-717bc228.js" ></script>
<!-- bibliotecas minimizadas -->

48. <script src="/dist/vendor.min-717bc228.js" ></script>
<!-- bibliotecas minimizadas -->
<script src="/dist/boot.min.js" ></script>

49. <script src="/dist/vendor.min-717bc228.js" ></script>
<!-- bibliotecas minimizadas -->
<script src="/dist/boot.min.js" ></script>
<!-- inyectado de forma dinámica -->
<script src="/dist/home.min.js" ></script>
<script src="/dist/comments.min.js" ></script>

50. <style>
<!-- estilos inyectados de forma dinámica -->
</style>
<script src="/dist/vendor.min-717bc228.js" ></script>
<!-- bibliotecas minimizadas -->
<script src="/dist/boot.min.js" ></script>
<!-- inyectado de forma dinámica -->
<script src="/dist/home.min.js" ></script>
<script src="/dist/comments.min.js" ></script>

51. <style>
<!-- estilos inyectados de forma dinámica -->
</style>
<script src="/dist/vendor.min-717bc228.js" ></script>
<!-- bibliotecas minimizadas -->
<script src="/dist/boot.min.js" ></script>
<!-- inyectado de forma dinámica -->
<script src="/dist/home.min.js" ></script>
<script src="/dist/comments.min.js" ></script>

52. En conclusión
• JS sigue moviendose rápido.
• Nuevas herramientas permiten desarrollar aplicaciones más
complejas.
• Algunas herramientas son complicadas todavía.
• Se recomienda adoptar poco a poco.

53. Preguntas
@jeduan
http://
meetup.com/
eventloop