DIGIT Noe 2016 - Overview of front end development today
Download as PPTX, PDF•0 likes•698 views
This document provides an overview of front-end development approaches, including traditional server-side rendering and modern single-page applications (SPAs). It discusses the evolution from traditional to SPA approaches, characteristics of SPAs like modularity and client-side rendering, and considerations for choosing between server-side and client-side solutions. The document also showcases GitHub.com and the Azure Portal as examples of applications that take hybrid approaches, with some modules behaving as traditional sites and others as fully-fledged SPAs.
DIGIT Noe 2016 - Overview of front end development today
- 1. Overview of front-end development today Bojan Veljanovski (@bojanv91) Chief Technology Officer @ HASELT DIGIT Noe 2016
- 2. 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
- 8. 1) Front-end development? • Code in • HTML • CSS • JavaScript • Run in • Web browser • Headless browser • WebView • Native runtime environment
- 9. 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
- 10. 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)
- 11. 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 is closer to client
- 12. 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
- 13. 2) Traditional? • Server-side rendered pages • Every request results with a new page • Feels static
- 14. 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
- 15. 2) Characteristics of SPAs • Modular • Component-oriented • Event-driven • Reactive • Client-side rendering and navigation • In-browser databases (for offline work)
- 16. 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
- 17. Choosing a side Closer to server vs. closer to client
- 18. 5) Showcase: GitHub.com 1. 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?
- 19. 6) Showcase: Azure Portal • https://channel9.msdn.com/Blogs/Windows- Azure/Azure-Preview-portal
- 20. 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
- 21. …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.
- 22. THANKS!
- 23. 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