DIGIT Noe 2016 - Overview of front end development today
-
Upload
bojan-veljanovski -
Category
Technology
-
view
303 -
download
2
Transcript of DIGIT Noe 2016 - Overview of front end development today
![Page 1: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/1.jpg)
Overview of front-end development todayBojan Veljanovski (@bojanv91)
Chief Technology Officer @ HASELT
DIGIT Noe 2016
![Page 2: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/2.jpg)
Agenda• 1) What is front-end development?• 2) Traditional to Modern SPA approaches• 3) Choosing a side• 4) Showcase: GitHub.com• 5) Showcase: Azure Portal
• Summary• Further Reading
![Page 4: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/4.jpg)
![Page 5: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/5.jpg)
![Page 6: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/6.jpg)
![Page 7: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/7.jpg)
![Page 8: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/8.jpg)
1) Front-end development?• Code in • HTML• CSS• JavaScript
• Run in• Web browser• Headless browser• WebView• Native runtime environment
![Page 9: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/9.jpg)
1) Run in• Web browser• Chrome, IE, Firefox, Brave, Vivaldi running on an OS
• Headless browser• Used for test automation, scraping• Techs: PhantomJS and others
• WebView• Embedded in a native app with some access to native
APIs• Techs: Apache Cordova, Electron
• Native runtime environment• Native app interpreted at runtime with a access to
native APIs• UIs are composed of native controls• Techs: NativeScript, ReactNative
![Page 10: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/10.jpg)
1) What should you know?• HTML• CSS• DOM (Document Object Model)• JavaScript (e.g. ECMAScript6)• Web APIs (HTML5 and Browser APIs)• HTTP (Hypertext Transfer Protocol)• WebSocket (for full-duplex communication)• JSON (JavaScript Object Notation)• Web Content Accessibility Guidelines (WCAG) & Accessible
Rich Internet Applications (ARIA)
![Page 11: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/11.jpg)
2) Types of Browser apps • Static • presentation websites, news, blogs• e.g. http://sp.finki.ukim.mk/digit/
• Interactive• Line-of-Business apps, CRUD apps, CMS-based apps• e.g. http://GitHub.com
• Highly-interactive (“Reactive”?) • e.g. advanced monitoring apps, real-time always-
connected apps• Azure Portal, GMail
UI stuff is closer to server
UI stuff iscloser to client
![Page 12: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/12.jpg)
2) Evolution of an approach• Traditional• The server does most of the presentation related stuff
• Modern SPAs (Single Page Applications)• The client does most of the presentation related stuff
![Page 13: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/13.jpg)
2) Traditional?• Server-side rendered pages• Every request results with a new page• Feels static
![Page 14: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/14.jpg)
2) Single Page Application?• Native-like experience• Rich and responsive browser application• All HTML/CSS/JS are loaded onto one page, on first
visit• No “page refresh” on navigation or action• New data and content is pulled via AJAX and client-
side rendered• Server becomes just a thin JSON data provider• UI interactions are handled in the browser
![Page 15: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/15.jpg)
2) Characteristics of SPAs• Modular• Component-oriented• Event-driven• Reactive• Client-side rendering and navigation• In-browser databases (for offline work)
![Page 16: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/16.jpg)
3) …but careful, the roads to SPA are bumpy• Code duplication on client and server will occur• Steep learning curve!!!• Strong JavaScript skills are a MUST• Security issues• Compatibility issues - SPA stacks depend on far too
many 3-rd party libraries• Technology overhead - brand new “silver-bullet”
library is released every day
![Page 17: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/17.jpg)
Choosing a sideCloser to server vs. closer to client
![Page 18: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/18.jpg)
5) Showcase: GitHub.com1. When navigating to other views, does the browser
always make page refreshes?2. When performing actions on current page, does
the browser always stay intact and does not make page refreshes?
3. Is it a traditional web application?4. Is it a fully modern SPA?5. Is it modular? Are some modules fully SPA
themselves, and other plain old traditional web pages?
![Page 19: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/19.jpg)
6) Showcase: Azure Portal• https://channel9.msdn.com/Blogs/Windows-Azure/
Azure-Preview-portal
![Page 20: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/20.jpg)
Summary• Slice your apps in several cohesive modules.• Decide development approach per module, not per
application.• There is no silver bullet.• When to go with SPA approach?• You are building highly interactive (reactive) web apps• You are building real-time web apps• You need offline support for your web apps• You are building hybrid mobile apps
![Page 21: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/21.jpg)
…and all boils down to:Choose the simplest tool with which you can get the job done,
and do the simplest thing that could possibly work,
but be super aware and well informed about what else is possible.
Listen to feedback, improve and iterate continuously.
![Page 22: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/22.jpg)
THANKS!
![Page 23: DIGIT Noe 2016 - Overview of front end development today](https://reader036.fdocuments.net/reader036/viewer/2022070602/5873baaf1a28abbc788b546d/html5/thumbnails/23.jpg)
Further Reading• Books• http://singlepageappbook.com • http://frontendhandbook.com
• Techs• http://aurelia.io/ • https://cordova.apache.org • http://electron.atom.io • https://www.nativescript.org • https://facebook.github.io/react-native