This document provides an overview of past, present, and future trends in frontend development. In the past, JavaScript grew from a non-essential web language to an essential part of the modern web. Currently, JavaScript frameworks like React and Vue have become popular, and new programming models around components and functional programming have emerged. Looking ahead, trends like GraphQL, Progressive Web Apps, serverless architectures, AI/chatbots, and Web VR may shape the future of frontend development.

1. FRONTEND
PAST, PRESENT AND THE FUTURE

3. AGENDA
▸Brief retrospective
▸Present state
▸Future trends

4. WE HAVE COME
A LONG WAY
PAST

5. State of the web over time
1995 2000

6. State of the web over time
2000 2005

7. State of the web over time
2005 2010

8. State of the web over time
2010 2015

9. State of the web over time
2015 …

11. POST
JAVASCRIPT
PRESENT

12. https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6
Ecosystem growth

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

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

16. Drivers of change
Diversification of devices
Quality requirements
Massive market growth

17. https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6
Ecosystem growth

18. New programming models
Component-based architectures
Functional programming mechanisms
Carefully encapsulated state

19. https://blog.logrocket.com/the-increasing-nature-of-frontend-complexity-b73c784c09ae
- Kevin Ball

20. TRENDS
FUTURE

21. Predicting trends in tech
“A rocket will never be able to leave the
Earth’s atmosphere.”
— New York Times, 1936.

22. http://www.visualcapitalist.com/a-timeline-of-failed-tech-predictions/

26. http://www.timqian.com/star-history/
Frontend frameworks

30. http://www.npmtrends.com/

31. https://stateofjs.com/2017/front-end/results/
Libraries

32. React vs Vue

33. Approachable
One step away from mobile development (React Native)
Functional programming benefits (immutability, explicit state management)
Redux
Lot’s of innovation in the community (Relay, Next.js)
Virtual DOM
One-direction data flow
Reuse of components
React pros

34. Alone never enough
- Combining various libraries can be challenging
- Need transpilation, build tools etc.
Redux is verbose
JSX?
High pace of development
- Documentation doesn’t always catch up
- Easy to fall behind
React cons

35. Size 59KB (React: 98KB)
Easy learning curve
Can do both: full SPA and simple components
Best documentation
Template syntax
Vue pros

36. A closed community development
Language Barrier
Too much flexibility?
Vue cons

37. Future of JavaScript?

39. https://codeburst.io/the-future-of-javascript-will-be-less-javascript-cea373eb57fd
Future of JavaScript

40. Future of JavaScript
https://tomdale.net/2017/09/compilers-are-the-new-frameworks/
- Tom Dale

41. Future of JavaScript
https://tomdale.net/2017/09/compilers-are-the-new-frameworks/
- Tom Dale

42. Application state
Redux
Mobx
Vuex
ngrx/store
Store
Actions
Reducers
Mutations
https://medium.com/@Musclenun/redux-vs-vuex-9b682529c36

43. Web components / compilers
https://stenciljs.com/
Potentially could work in any app (be it Angular, React or Vue)
Writing them directly is not too awesome, but Stencil can help

44. StencilJS component

45. GraphQL
A serious contender to REST APIs
https://medium.com/@johntucker_48673/is-graphql-the-future-of-web-service-apis-ff932936501e
Makes a lot of sense when your data model becomes too complex

46. GraphQL
A whole bunch of features
• Fields
• Arguments
• Aliases
• Fragments
• Operation Name
• Variables
• Directives
• Mutations
• Inline Fragments

47. Static web pages
Build a static version of what normally would be a dynamic website
Using latest automation tools

48. Progressive web apps
https://developers.google.com/web/progressive-web-apps/
Better UX for web apps
Seem faster
Can be added to Home screen
Effective (pre)caching of key resources
Immersive full screen experience
Can even send push notifications

49. Serverless
BaaS & FaaS

50. AI bots
Big development happening with AI and machine learning right now
Chatbots created on the basis of artificial intelligence and neural
networks will continue to evolve helping to increase communication
online
This will likely spill over to frontend in some way…

51. Material design

52. CSS grids
http://cssgridgarden.com/

53. Is end in sight for CSS pre-processors as PostCSS, CSSnext, and CSS in JS take over?
Writing CSS
“Use tomorrow’s CSS syntax, today.”

54. Further and beyond
Opportunity to create powerfully immersive media experiences that
previously might have required massively custom solutions
Web Payments API
https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
Seamless access to capabilities that previously were restricted to native
devices only. Could be as simple as buying things from an app store — a
simple thumb ID and you’re done.
Web VR
https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API

55. Bezos idea of essential core features
Simple core ideas
Cheap prices Vast selection Fast delivery

56. Big ideas of the Web
URLs
Performance
Accessibility

57. Thank you