Love, Sanity & Madness: The Life of a Modern Frontend Engineer

The frontend engineer....well, the "Modern" frontend engineer feels a mix of emotions as they go through their job.
In this talk, I talk you through some of the nuances of modern frontend development as we walk through the life (and struggles) of a modern frontend engineer.

Transcript

1. LSM Love, Sex & Marriage
2. LSM Love, Sanity & Madness The Life of a Modern Frontend Engineer
3. AIM To show you around the workings of modern frontend development After this, you should be comfortable picking up any modern frontend framework you want to. ReactJS, VueJS, CycleJS etc.
4. Seriously? Hipters! No standards in sight!
5. grunt => gulp => => webpack => parcel => madness?
6. Yes, Javascript Fatigue is a thing …
7. Y
8. But Why? what really is the problem we’re trying so hard to solve?
9. 23 years ago … the year, 1995.
10. Let’s build ‘em a website Woof! Woof!!!
11. Interactive UI view logic biz logic ORM Persistence The native web app dev already had a way of doing things
12. Static UI view logic biz logic ORM Persistence the latency black box
13. 2 Major Problems…
14. 2 => Interactive UI (that felt native) => Web Pages (accessible via a url)
15. 10 years later … the year, 2005
16. s later … Hello, Ajax!
18. We had not caught up yet Hmmmm….
19. 1st Generation of JS Frameworks
20. Interactive UI view logic biz logic ORM Persistence the latency black box
21. Interactive UI view logic biz logic ORM Persistence the latency black box REST Api JSON REST Api HTTP calls
22. Shouldn’t we have just stayed there happily? No way. F*cking Javascript?
23. 1. The JS Engines grew more powerful (thanks Google V8) 2. Developer Experience drove innovation (Thanks, Redux) 3. Performance, baby. (manipulating the DOM is so expensive)
24. The 2nd Generation of JS libraries (2013/2014) They claim we can now build more Robust Apps. True?
25. Hello, Components Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions.
27. Oh, DATA! How does data flow within the APP? How’s it kept in Sync?
28. Data flows through every app . Whether data owing to the user’s interaction, or some data received from the server.
31. Manipulate the state not the DOM
32. Hello, Virtual DOM
33. A lot has changed and we seem to be doing fine.
34. But wait …. Those pesky native application developers again!
35. KILL the Bloody dinosaur!
36. Native app developers don’t see this.
37. Jesus!
 They can send Push Notifications, they have access to local storage and some other fancy stuff.
38. Hello, Progressive Web Apps
39. Oh! It’s not supported by all browsers - yet.
40. Just maybe we’ll get some sanity. Soon.
41. Gracias, mi amigos The End