Future of Front-End Development by Vyacheslav Koldovskyy, SoftServe, Learning Solutions Architect, Professional Google Cloud Architect, t.me/programmingmentor
FRONT-END LANDSCAPE
FRAMEWORKS 2019
WHAT'S WRONG WITH SPA?
ALL IS WRONG!
IN DETAIL… Is it OK to be "Single Page"? Is it OK to be "Application"?
HOW DO WE FIGHT CONSEQUENCES Browser-side: History API Minification, Uglification Code Splitting Progressive Enhancement PWA AMP Caching Accessibility Optimizations Server-side: Server-Side Rendering Isomorphic Applications Complex Architecture
MAYBE THERE IS ANOTHER WAY?
LONG TIME AGO…
HOW IT ALL HAS STARTED?
1991
1991
1995
1996
1999 - Web 2.0 https://en.wikiversity.org/wiki/Web_2.0
Semantic Web (1999), Web 3.0 "I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A "Semantic Web", which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The "intelligent agents" people have touted for ages will finally materialize." - Tim Berners Lee, 1999 https://en.wikipedia.org/wiki/Semantic_Web
Sematic Web Markup https://en.wikipedia.org/wiki/Semantic_Web#cite_note-6
2002 - RIA
2008 – HTML5 Application January 2008 – Working Draft October 2014 – W3C Recommendation Key points: Multiple new APIs Media support RIA becomes obsolete SPA boom has started
APPROACH MATTERS
THE GREAT DIVIDE “TWO FRONT-END DEVELOPERS ARE SITTING AT A BAR. THEY HAVE NOTHING TO TALK ABOUT.” — CHRIS COYIER, JANUARY 2019 https://css-tricks.com/the-great-divide
WHO IS FRONT-END DEVELOPER? Let’s vote https://css-tricks.com/the-great-divide
THE CASE…
PAGESPEED RESULT
BACK TO THE ROOTS…
2018 – NEWS FROM GITHUB TEAM
RULE OF LEAST POWER
GATSBY.JS
Google Cloud Global Cache
SOME POSSIBLE SERVERLESS ARCHITECTURE
WEBCOMPONENTS Custom Elements Shadow DOM HTML Template ES Modules
SPEED MATTERS https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
MODERN CSS POWER CSS GRID LAYOUT CSS VARIABLES VARIABLE FONTS @supports rule
AND NOW SOMETHING FUN….
jQuery https://w3techs.com/technologies/overview/javascript_library/all
“THE BEST WAY TO PREDICT THE FUTURE – IS TO CREATE IT” - Abraham Lincoln
THANK YOU! Vyacheslav Koldovskyy, t.me/programmingmentor