En esta charla vamos a hablar de desarrollo web front-end. Empezaremos por entender bien en qué consiste el desarrollo front-end y por qué las empresas están contratando mucho este perfil profesional. Haremos un repaso de las tecnologías que se utilizan para desarrollo front-end, desde HTML semántico, pasando por preprocesadores CSS, hasta ES6 y librerías como React. Y también revisaremos qué herramientas que utiliza un desarrollador front-end en 2018, desde un editor decente, las devtools del navegador, hasta automatizadores de tareas como gulp. Al final tendrás una buena perspectiva de la profesión de front-end y cómo aúna habilidades técnicas de programación con otras muy distintas, como estética visual y atención al detalle.

3. All you need is front

4. Education innovation +
All things tech
@ Adalab

5. Isr ael Gut iér rez
Education innovation +
All things tech
@ Adalab

7. Full-stack
developer

10. OBVIOUS
AHEAD

12. DIVERSION
AHEAD

14. All You Need Is Love
Baby. You’re A Rich Man
BEATLES
The

15. https://blog.logrocket.com/the-increasing-nature-of-frontend-complexity-b73c784c09ae

16. Paul McCartney
HTML

17. Paul McCartney
HTML
HTML

20. John Lennon
CSS

21. John Lennon
CSS
CSS

22. The Easiest
or
The Hardest?

23. Tables Floats Flex➔ ➔

24. Tables Floats Flex➔ ➔

25. Tables Floats Flex➔ ➔

26. Bootstrap:
Friend or Foe?

27. Responsive
&
Mobile First

28. Animations and Transitions

29. Animations and Transitions

30. CSS
Preprocessors

31. Variables

32. Imports

33. https://github.com/bameda/postcss-andalusian-stylesheets

35. HTML CSS

36. Ringo Starr
JavaScript

37. Ringo Starr
JavaScript
Java
Script

38. Form
validation

39. Form
validation

40. AJAX

41. jQuery

42. Spaghetti
code

43. ES6
&
Babel

44. The Advent
of the
Frameworks

45. George Harrison
Tooling

46. George Harrison
Tooling
Tooling

47. Version
control

48. Task Automation

49. Package
manager

50. DevTools

51. http://slides.com/soyguijarro/testing-javascript
Testing

52. Linter

54. The Fifth Beatle

56. The Fifth Beatle
The Future

57. The Fifth Beatle
The Future
Future

58. Web APIs
http://slides.com/soyguijarro/magic-web

59. Progressive Web Apps

60. Mobile apps

61. Serverless

62. UI
maquetas
Pure JS

63. Full-stack front-end
UI
maquetas
Pure JS

64. UI
maquetas
Pure JS

65. All You Need Is Front
Baby. You’re A Unicorn
DEVELOPER

66. All You Need Is Front
Baby. You’re A Unicorn
DEVELOPER
HTML CSS Java
Script
Tooling Future

67. All You Need Is Love
Baby. You’re A Rich Man
BEATLES
The

68. All You Need Is Love
Baby. You’re A Rich Man
BEATLES
The

69. The Beatles
is THE Band

70. Web
is THE Platform

72. DIVERSION
ENDS

74. All you need is front
Thank You!

75. References
• State of JS 2017 - https://stateofjs.com/2017/introduction/
• 4 layout techniques - https://www.codementor.io/codementorteam/4-different-
html-css-layout-techniques-to-create-a-site-85i9t1x34
• The increasing nature of frontend complexity - https://blog.logrocket.com/the-
increasing-nature-of-frontend-complexity-b73c784c09ae
• Frontend in 2017: The important parts - https://blog.logrocket.com/frontend-
in-2017-the-important-parts-4548d085977f
• Frontend in 2018: More consensus, less complexity - https://
blog.logrocket.com/what-im-looking-for-from-frontend-in-2018-2f1de300b548

76. Images
• https://commons.wikimedia.org/wiki/
File:Beatles_ad_1965_just_the_beatles_crop.jpg
• https://en.wikipedia.org/wiki/All_You_Need_Is_Love
• JS complexity: https://blog.logrocket.com/the-increasing-nature-of-frontend-
complexity-b73c784c09ae
• https://www.belfasttelegraph.co.uk/entertainment/music/news/sir-paul-
mccartney-remembers-john-lennon-on-77th-birthday-36210364.html
• https://edition.cnn.com/2016/03/09/entertainment/who-was-real-fifth-beatle/
index.html