Web Frontend Evolution

Transcript

1. koodiasuomesta.fi -meetup
 Oulu 2.11.2017
 
 Miro Nieminen
 @mironieminen From Berners-Lee to Abramov
2. Mitä koodasit aamulla ennen tänne saapumistasi? KYSYMYS:
3. future co-created
4. Founded in 2000 450 employees from 30+ countries GPTW Europe 2012 & 2013 Winner YOY avg. growth 30% (38% in 2016) Helsinki Tampere Stockholm Berlin Munich London We help our customers succeed in digital business_
5. The digital disruption needs builders, innovators and change agents to show the world the way_ That’s us
6. Development Advisory Combining design, tech, & business_ Design Data
8. Miro Nieminen_ Project Lead / Tech Consultant Enabling development teams to reach their maximum delivery capability by utilizing best practices and processes while finding problems worth solving.
 
 Miro has a strong background in both frontend and backend web development with modern technologies and methods. He has worked in contexts ranging from four-person MVPs to 40-person product development projects. Experience Project Lead. Futurice/
 2017 - present Lean Service Creator. Futurice/ 2015 - 2016 Software Specialist. Futurice/
 2013 - 2014 IT Trainee. UPM Raflatac/
 2011 - 2013 Web Dev Freelancer
 2010 - 2013 Education Tampere University of Technology. M.Sc/
 Software Engineering Scrum Alliance. 
 Certified ScrumMaster/
 Certified Scrum Product Owner Location. Tampere office github.com/miro twitter.com/mironieminen
9. "Miksi React on opettelemisen arvoinen teknologia?"_ ...ja erityisesti, mistä siinä on kyse?
10. 2013 React 2015 Redux 1993 HTML 1995 JavaScript ~2000 AJAX, Web 2.0 2006 jQuery 2010 Single-Page Apps Agenda_
11. 1993: HTML webfoundation.org/about/vision/history-of-the-web/
12. 1993: HTML Birger Eriksson, CC BY-SA 3.0
13. 1993: HTML
15. “HTML needed a ‘glue language’ that was easy to use [...] where the code could be written directly in the Web page markup." 1995: JavaScript - Marc Andreessen
16. 1995: JavaScript
17. 1995: JavaScript Palvelin HTML, CSS, JS Selain
18. ~2000: AJAX, Web 2.0 API Palvelin Selain JavaScript-koodi, suoritetaan selaimessa HTML, CSS, JS XMLHttpRequest
19. Siirtyminen web-sivuista web-applikaatioihin!
20. 2010: Single-Page Apps
21. 2010: Single-Page Apps API Palvelin Selain JavaScript-koodi, suoritetaan selaimessa HTML, CSS, JS XMLHttpRequest
22. 2010: Single-Page Apps
23. 2010: Single-Page Apps Birger Eriksson, CC BY-SA 3.0 render()
24. 2010: Single-Page Apps
25. 2010: Single-Page Apps $scope DOM
26. 2010: Single-Page Apps $scope DOM
27. 2013: React Tila DOM
28. Virtual DOM 2013: React Tila DOM
29. 2013: React "Mitäpä se hyvejää?" • Pieni API: pelkkä view-kerros • "funktionaalisuus": react(sovelluksen_tila) -> näkymä • Helposti uudelleenkäytettävät komponentit • Laaja & aktiivinen ekosysteemi • Puhdasta JavaScriptiä (pienin poikkeuksin...)
30. Virtual DOM 2013: React Tila DOM
31. Virtual DOM 2013: React 2015: React Native Tila DOM iOS Android
32. WM_Paint 2013: React 2015: React Native 1985: Windows 1.0 Tila DOM
33. “Everything old is new again.“ - Benjamin Pollack bitquabit.com/post/the-more-things-change/
34. Kiitos. Thank you_ Kysymyksiä?
35. PS: We really love feedback_ miro@futurice.com
 @mironieminen Miro Nieminen