Trends in front end engineering_handouts

“Application” redefined: An application is what the user sees, experiences. The front end consumes the back end services through APIs.

• Design for the customer => deliver a great user experience• Architecture your application by splitting it in 3

• Front end• API• Back end

• 3 kinds of engineers, each with own specialization• 2 speeds: front end vs systems of record => bimodal IT

4





5





6





7

- World of front end engineering, especially the web, is changing at a fast pace

- Shift to the web: a lot of companies are shifting towards web technology, why?- State of the web: what is the web capable of?- The future is bright: what wil the future bring?- Takeaways: what you should remember after this session

8

The way we use services has changed a lot in this digital era

We don’t plan a vacation by visiting a travel agency, checking some magazines andbooking our trip there. Instead we search info online about our destination, aboutthe accomodation , about how to get there. We compare and buy online

If we want to buy a car we use a car configurator online, check possible colors, options, prizes

Instead of reading a nwespaper we subscribe to different sources and get aggregated info which we can share with our friends on social media

=> The internet is more than a source of info, it’s an interactive platform

10

Spotify completely changes the way we get access to our music

- Don’t go to shop, buy cd and listen to it by putting it in cd drive- Pay for a service, have access to a huge music library, listen everywhere, share,

follow, discover new music

11

Uber causes a lot of stress for traditional taxi companies

- Don’t pick a taxi company, call it and wait for the taxi to arrive- Use a mobile app to check which drivers are in the neighbourhood

12

But we often have to download a separate application to use the service on ourmobile devices. Why is this?

13

Numbers like these underlign the importance of the mobile web. Ask yourself: howmany apps do you use on a daily base versus how many websites do you visit usinga mobile device? It’s likely you’ll end up

14

It all started with the mobile revolution back in 2009, when the first economically successful smartphone, the iPhone 1, was launched.

At that time:- mismatch between mobile and web worlds- web wasn’t ready for mobile: features such as touch, gestures, access to camera,

screen orientation, geolocation, … not supported)- mobile wasn’t ready for web: bad browser support, performance)- only solution: writing native apps

15

Image source: http://drjoanrosenberg.com/wp-content/uploads/2013/08/Fork-in-Road-Man-with-Hat-Depositphotos_20390925_m.jpg

Now, 6 years later:- choice isleft unchallenged- still a lot of native (or hybrid) apps are getting developed- it might even hurt your product having your customers conquer yet another

hurdle- AirBnb has updated their website to work responsive on all devices, exactly for

that reason. They still offer a standalone native app, but you no longer need it to make use of their services.

16

Mark Zuckerberg revealed that Facebook’s mobile strategy relied too much on HTML5, rather than native applications.Het said that the biggest mistake was the focus on HTML5 because it wasn’t ready.

Guys from Sencha took a little offense to the comment and they thought to themselves:HTML5 can't really be the reason that Facebook's mobile application was slow. We knew what the browser on modern smart phones was capable of and what kind of rich capabilities HTML5 offered. We saw the latest generation of mobile devices —running at least iOS 5 or Android 4.1 — push ever increasing performance and HTML5 implementation scores. But perhaps most importantly, we'd seen what our customers were building and the amazing things they were creating using HTML5.When a team has problems with HTML5, it usually stems from the fact that they take a “website” development approach to building an app, and often don't use the right tools and architectures for application development.

The guys from Sencha created an HTML5 app called Fastbook and the video shows a comparison between the Facebook native app and the Fastbook HTML5 webapp. You’ll be astonished!

And that was even 2 years ago!

17

That’s why we believe you should move from native apps to offering your services directly via the web. Native apps will still be useful, for the time being, for more demanding applications like games.

18

That’s why we believe you should move from native developmet to offering yourservices directly via the web. Native apps will still be useful, for the time being, formore demanding applications like games.

20

HTML5 standard is defined with web apps in mind.

It doesn’t only cover HTML but also JS

It includes:- native video and audio support , no need to install plugins like flash or silverlight- scaled vector graphics, web GL rendering, animations- drag & drop- semantic tags- reusable components- web sockets

It’s a living standard and browser support is actively developed.

22

Browser types:- Evergreen

- Google and Mozilla release a new version of Chrome and Firefox everymonth

- Pushed versions- Microsoft and Apple still push browser updates via OS- Old OS = old version of browser

Project Spartan: Microsofts browser that will replace IE.- Includes new rendering engine- Better developer tools- And is evergreen!

How to cope with this:- Stop doing user agent sniffing! Use feature detection or use polyfills

23

1 of the advantages of native apps was the ways to interact with mobile devices

HTML5 spec includes JS API’s for interacting with mobile devices

When asking geolocation, browser will ask user for permission

24

How do we request permissions in a web application?

The disadvantage of the app approach is that we cannot install the app without granting all of the requested permissions, while the web app on the right will keep working even if the user denies some features permissions.

25

URI schemes make it possible to call native apps from a web app,

Examples:- mailto: opens the mail client and already creates a mail to specified recipient- tel: opens app to make a call to specified nr- sms: opens app to send sms to specified nr- skype: opens skype- spotify: can load a track, album, artist, search or playlist in spotify- maps: opens mapping application- market: open google play

26

From within the search results you can immediately call, navigate or go to website of AE,

When a specific action is chosen, the right app is opened in the correct state

27

A web worker is a JS script running in the background, independently of other UI scripts.A web worker can utilize multi-core CPU’s more effectively

Latest browser’s JS engines are blazing fast

Not only technological improvements but more awareness about performance- JS, CSS, images, HTML can easily be minifed to reduce loading time- Module loading techniques can boost initial times- Performance profiling tools in browsers- Services and browser plugins to give performance ratings (Google PageSpeed,

YSlow, Pingdom,

28

Offline should not be treated as a corner case. In tunnels, in the airplane, in the train, people want to continue using your web app.

Data can be stored client side:- WebStorage: key value pairs

- sessionStorage – stored in browser window- localStorage – stored in browser across windows and tabs (5MB per

storage area)- IndexedDB (API) / WebSQL

- Structured data- Transactionality- Data can be queried- No size limitations

Data can be synced- PouchDB

- based on IndexedDB- Syncs with a CouchDB on the server

Application cache- Defines which resources to cache

Service worker- Runs in background- Controls how network requests are handled (= programmable network proxy)

29

It’s not just about having data offline, it’s about the offline experience

Lanyrd:- service listing up professional events- user can search for events, connect with friends, check where they’re going to,

where they’re speaking- user can track event, check what’s tweeted, what links are hot during event- user can discover slides and video’s- Speaker can create portfolio

Offline experience of Lanyrd:- Users can see information on future conferences they are attending

30

Using HTML5 capabilities, your web site can be configured to be installable on the homescreen of your users’ devices. This allows you to offer the experience or look and feel of a native application without having to maintain multiple code bases.

You can also publish your HTML5 web application to web app stores like the onefrom Amazon.

31

- Different libraries for responsive design, CSS structuring- Development frameworks, utility libs, JS superset langs- Debugging tools + emulators (in the browser) => different devices + network

speed emulators- Testing frameworks=> multi browser- Testing cloud services => multidevice => emulated + physical devices- ALM tools => dependency management, build, package

32

We’re no longer building simple web sites, but web applications.

A web application is more complex and as such a lot of tools, libraries andframeworks have arisen to tackle this complexity.This is no different than what we’ve been doing in classic development languageslike Java or .NET. Each project makes a pick out of the available tools, frameworksand libraries to form its own stack.

33

Web standardization is a fact. Offline support, ALM tools, unform design principles, testing, development frameworks& debugging tools are present.So there’s not a cloud in the sky?

35

A lot of development frameworks are out there. Based on adoption rate , Angular is the clear winner, so simply go with Angular and you’ve got nothing to worry about?Guess again. Angular’s initial goal was to bridge the gap between the browsers at that time and the HTML5 specification.

But as the HTML5 standard is now complete, features like Object.observe andWebComponents will become natively available in the browser. As a consequencen Angular’s purpose will be diminished. To make sure they won’t become obsolete, they therefore anounced big changes for 2.0. This means that it won't be an easy upgrade, you'll need to put some effort in it.

36

It’s not that these changes weren’t already a fact, it’s the fact that things are now changing at a faster rate.

37

This approach is exactly the same as forcing your users to download the mobile application.

38

Be agile in this rapidly changing world and embrace the change that’s happing in the web world

41

Staying up to date incurs a cost. On the other hand, not staying up to date, could cost even more money. If you lose to your competitors, you risk losing market share and maybe even your business as a whole .

42

Employees are used to working with modern UI applications at home, they expectthe same experience when they’re at the office

A lot of people have tablets or get one from their employer. Company applicationsshould work on those devices as well

Some of your employees might be on the road a lot for their daily job, so the company applications they want to use should work on mobile devices

43





45

Don’t just use technology and be dependant on it.

Think your choices through. Which technologies will you use? How will the architecture of the front end look like? Think about solid standards such as looselycoupling, modularity, separation of concerns, …When a team has problems with HTML5, it usually stems from the fact that they take a “website” development approach to building an app, and often don't use the right tools and architectures for application development.

Make sure all parts of your applicarion are easily swappable.Example: Use facades to hide underlying technological choices (i.e; which library did you choose for the task at hand). The last thing you want is to rewrite yourapplication because the technology evolves. It will evolve, so be prepared!

46

Trends in front end engineering_handouts

Mobile

Transcript of Trends in front end engineering_handouts