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