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
Overview of front-end development todayBojan Veljanovski (@bojanv91)
Chief Technology Officer @ HASELT
DIGIT Noe 2016
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
Image source: https://www.frontendhandbook.com/
1) Front-end development?• Code in • HTML• CSS• JavaScript
• Run in• Web browser• Headless browser• WebView• Native runtime environment
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
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)
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
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
2) Traditional?• Server-side rendered pages• Every request results with a new page• Feels static
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
2) Characteristics of SPAs• Modular• Component-oriented• Event-driven• Reactive• Client-side rendering and navigation• In-browser databases (for offline work)
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
Choosing a sideCloser to server vs. closer to client
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?
6) Showcase: Azure Portal• https://channel9.msdn.com/Blogs/Windows-Azure/
Azure-Preview-portal
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
…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.
THANKS!
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