Tweet
Tweet

Slide 1

Slide 1 text

THE FUTURE OF FRONT-END ENGINEERING

Slide 2

Slide 2 text

FRONT END
 INTERFACE LET’S START WITH THE MOST WELL-KNOWN

Slide 3

Slide 3 text

THE WEB

Slide 4

Slide 4 text

THE WEB INTERFACE HTML PROPOSAL, 1989-90

Slide 5

Slide 5 text

ORIGINS OF THE WEB INTERFACE HYPER TEXT MARKUP LANGUAGE ▸ Conceived in 1989 for researchers at CERN ▸ Created to display pages of text linked to other pages of text ▸ Simple text, with no styling, ugly tables and later, low-res images sprinkled in. ▸ Each document has a “Universal Resource Locator”

Slide 6

Slide 6 text

YAHOO HOME PAGE, CIRCA 1997

Slide 7

Slide 7 text

THE WEB INTERFACE THE WEB EVOLVED INTO A PLATFORM TO DELIVER SOFTWARE ▸ CSS ▸ JavaScript ▸ Document Object Model ▸ AJAX ▸ Flash

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

THE WEB INTERFACE RICH USER INTERFACES ON THE MODERN WEB

Slide 10

Slide 10 text

BUT FIRST… WE’LL COME BACK TO THE WEB PLATFORM

Slide 11

Slide 11 text

LET’S TALK ABOUT FRONT-END ENGINEERING INTERFACES TODAY ▸ Smartphone ▸ Full-size computer ▸ Smart TV ▸ Tablet ▸ Wearables ▸ VR

Slide 12

Slide 12 text

WHAT ARE THE CHALLENGES WITH FRONT-END ENGINEERING TODAY? TODAY’S INTERFACES

Slide 13

Slide 13 text

TODAY’S INTERFACES THE ENGINEERING CHALLENGES ▸ Users’ expectations have grown tremendously ▸ Multiple platforms ▸ Incompatible technologies ▸ Building for mobile is difficult and expensive

Slide 14

Slide 14 text

MOBILE ENGINEERING HOW DO LARGE ORGS
 APPROACH MOBILE? Choose a compromise: ▸ Productivity ▸ Feature scope ▸ User Experience

Slide 15

Slide 15 text

MOBILE ENGINEERING CHOOSE YOUR COMPROMISE ▸ Building dedicated teams for web, iOS and Android can triple your engineering cost (or split your productivity). ▸ You could use dedicated teams, but cut features to keep engineering costs in line. ▸ HTML-based web-views promise productivity and features at the expense of quality and user experience.

Slide 16

Slide 16 text

LET’S TALK ABOUT THE WEBVIEW…

Slide 17

Slide 17 text

THE HYBRID APPROACH BACK IN 2009, WE GOT A HOT NEW THING CALLED HTML5 ▸ Flash couldn’t keep up with Mobile ▸ Chrome started the second browser war ▸ Everyone thought HTML5 was the answer to everything ▸ PhoneGap and friends made some strong Cross-Platform promises

Slide 18

Slide 18 text

THE FACEBOOK HYBRID APP ▸ In the early days of mobile, Facebook did not have a successful mobile app. ▸ They decided to build on HTML5 hybrid technology ▸ It was released in 2010 for both iPhone and Android

Slide 19

Slide 19 text

1.5 STARS

Slide 20

Slide 20 text

“OUR BIGGEST MISTAKE WAS BETTING TOO MUCH ON HTML5“ Mark Zuckerberg - 2012 THE FACEBOOK HYBRID APP

Slide 21

Slide 21 text

THE FACEBOOK HYBRID APP FACEBOOK WENT BACK AND FORMED A NATIVE TEAM FOR IOS
 
 AND ANOTHER FOR ANDROID

Slide 22

Slide 22 text

IS NOT AN OPTION IF YOU'RE IN THE TOP 100
 OR YOU COMPETE IN THAT LEAGUE, SACRIFICING THE USER EXPERIENCE

Slide 23

Slide 23 text

THE DEDICATED TEAM APPROACH IT’S NOT A PERFECT SOLUTION ▸ Not every company can afford the resources for multiple teams. ▸ Even with dedicated teams, you have multiple codebases. ▸ Keeping feature parity is hard ▸ Keeping UX consistency is hard

Slide 24

Slide 24 text

WHAT'S THE IDEAL SOLUTION?

Slide 25

Slide 25 text

THE CROSS PLATFORM HOLY GRAIL WE WANT ALL OF THE FOLLOWING ▸ One expressive language/framework across Web, Desktop and Mobile ▸ Performance ▸ Reasonable amount of code re-use while maintaining the native look and feel for each platform ▸ Excellent user experience ▸ 60fps animations

Slide 26

Slide 26 text

LET’S TALK ABOUT THE REACT…

Slide 27

Slide 27 text

THE WEB CONTINUED REACT Let's continue our web story just a few years after HTML5 ▸ Mid 2013: Angular is the dominant web framework ▸ React is new and controversial ▸ The early adopters of React were fueling some incredible innovation in the front-end space. ▸ A lot of these ideas were very unpopular

Slide 28

Slide 28 text

“REACT IS PACKED WITH IDEAS THAT WERE RADICAL AT THE TIME OF ITS INTRODUCTION.” Dan Abramov THE WEB CONTINUED

Slide 29

Slide 29 text

THE WEB CONTINUED We could do a whole talk about how transformational React was at this time ▸ Declarative UI ▸ View as a function of state ▸ Immutability ▸ Composable UI components ▸ Batched, asynchronous rendering

Slide 30

Slide 30 text

THE STORY OF REACT BUT THERE’S ONE IMPORTANT CONCEPT TO UNDERSTAND…

Slide 31

Slide 31 text

CODE TIME

Slide 32

Slide 32 text

VIEW LOGIC IT TELLS YOU VERY LITTLE ABOUT THE UNDERLYING DISPLAY MEDIUM If you look at that piece of code …

Slide 33

Slide 33 text

REACT

Slide 34

Slide 34 text

“THE BROWSER IS JUST AN IMPLEMENTATION DETAIL” Someone in 2014 REACT

Slide 35

Slide 35 text

REACT This same code could target any display medium. In fact, several teams started doing this: ▸ Flipboard -> HTML5 Canvas ▸ Netflix -> “Gibbon” for Smart TVs ▸ (Some brave people) -> Terminal Interface ▸ … even a PDF renderer

Slide 36

Slide 36 text

REACT A UNIVERSAL FRONT-END

Slide 37

Slide 37 text

UNIVERSAL FRONT-END REACT NATIVE

Slide 38

Slide 38 text

UNIVERSAL FRONT-END LET’S SEE AN EXAMPLE…

Slide 39

Slide 39 text

Introducing the GeekCamp App from KodeFox kodefox.com/geekcamp

Slide 40

Slide 40 text

kodefox.com/geekcamp ▸ 100% React Native ▸ 100% Modern JS ▸ ~2 months using two developers (part-time) ▸ Redux, React Navigation, RN Elements, Animatable ▸ Type system using Flow

Slide 41

Slide 41 text

THE CROSS PLATFORM HOLY GRAIL REACT NATIVE GIVES US ▸ One expressive language/framework across Web, Android, iOS and Windows ▸ Performance ▸ Reasonable amount of code re-use while maintaining the native look and feel for each platform ▸ Excellent user experience ▸ 60fps animations

Slide 42

Slide 42 text

REACT NATIVE DEVELOPER
 EXPERIENCE

Slide 43

Slide 43 text

REACT NATIVE DEVELOPER EXPERIENCE ▸ Almost nonexistent compile times ▸ Hot Reloading ▸ Develop on multiple devices simultaneously ▸ Powerful layout using Flexbox ▸ Sane logging and debugging

Slide 44

Slide 44 text

DEVELOPER EXPERIENCE

Slide 45

Slide 45 text

REACT NATIVE MODERN JAVASCRIPT React Native is built on modern JS or “ES Next” ▸ Expressive new language features ▸ Promises and Async/Await - possibly the best thing to happen to asynchronous programming. ▸ Optional Typing for strong compile-time guarantees

Slide 46

Slide 46 text

REACT NATIVE REACT NATIVE IS A BUSINESS CHOICE TOO ▸ Ship quality products across platforms ▸ Effective use of engineering resources ▸ One set of tech to hire and train for ▸ Load balance engineers between teams

Slide 47

Slide 47 text

FUTURE OF FRONT-END WHERE DO WE GO FROM HERE?

Slide 48

Slide 48 text

FRONT-END ENGINEERING EXCITING TRENDS IN FRONT-END ▸ Styles in JS ▸ Strong types and type inference. ▸ Shift away from imperative programming, OOP, and MVC ▸ Powerful build tools and code analysis (Prepack) ▸ Languages that compile to JS:
 Scala, Dart, Elm, TypeScript, Kotlin, Reason

Slide 49

Slide 49 text

REACT NATIVE FRONT-END ENGINEERING IS GOING THROUGH A SORT OF RENAISSANCE ▸ Languages are evolving. ▸ Developer experience is improving. ▸ Barriers are coming down.

Slide 50

Slide 50 text

IT’S AN EXCITING TIME TO BE A FRONT-END
 ENGINEER

Slide 51

Slide 51 text

THANK YOU @sstur_ I’m Simon. I run a software agency: 
 We build React Native.