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”
TODAY’S INTERFACES THE ENGINEERING CHALLENGES ▸ Users’ expectations have grown tremendously ▸ Multiple platforms ▸ Incompatible technologies ▸ Building for mobile is difficult and expensive
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.
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
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
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
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
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
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
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
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
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
REACT NATIVE DEVELOPER EXPERIENCE ▸ Almost nonexistent compile times ▸ Hot Reloading ▸ Develop on multiple devices simultaneously ▸ Powerful layout using Flexbox ▸ Sane logging and debugging
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
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
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
REACT NATIVE FRONT-END ENGINEERING IS GOING THROUGH A SORT OF RENAISSANCE ▸ Languages are evolving. ▸ Developer experience is improving. ▸ Barriers are coming down.
sstur
kmwebnet
weaverryan
opelab
yayoi_dd
torounit
soracom
koudaiii
keio_smilab
kentosuzuki
mongolyy
huffon
nishiharatsubasa
dougneiner
maltzj
productmarketing
jeffersonlam
addyosmani
revolveconf
ammeep
robhawkes
shpigford
shlominoach
holman