The Secrets of Succesful Front End Engineering In this AE Foyer Glenn Dejaeger and Thomas Anciaux will focus on Trends and Aspects of front end engineering. When do you choose a native front end, when should you go web? What is a good front end architecture? How do you cover the design, development, test and lifecycle aspects of a professional front end? How to survive in the jungle of frameworks? What are the current insights and future directions in front end engineering? How do you deal with offline mobile? Do you need front end engineers?

1. 1

2. 2

3. 3

4. “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. “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
5

6. “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
6

7. “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
7

8. - 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

9. 9

10. 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 and
booking our trip there. Instead we search info online about our destination, about
the 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

11. 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

12. 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

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

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

15. 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

16. 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

17. 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

18. 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

19. 19

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

21. 21

22. 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

23. Browser types:
- Evergreen
- Google and Mozilla release a new version of Chrome and Firefox every
month
- 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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 one
from Amazon.
31

32. - 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

33. 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 and
frameworks have arisen to tackle this complexity.
This is no different than what we’ve been doing in classic development languages
like Java or .NET. Each project makes a pick out of the available tools, frameworks
and libraries to form its own stack.
33

34. 34

35. 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

36. 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 and
WebComponents 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

37. 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

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

39. 39

40. 40

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

42. 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

43. Employees are used to working with modern UI applications at home, they expect
the same experience when they’re at the office
A lot of people have tablets or get one from their employer. Company applications
should 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

44. 44

45. “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
45

46. 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 loosely
coupling, 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 your
application because the technology evolves. It will evolve, so be prepared!
46

47. 47

48. 48

49. 49

50. 50