Presentation from the Front-End night 1 event

1. @tryshchenko

2. @tryshchenko
Obscurity

3. @tryshchenko

4. @tryshchenko
But why?
Because business is more important than your sense of perfection

5. @tryshchenko
PWA are not here going
to replace native apps.
At least now

6. @tryshchenko
Prejudice
• Hybrid applications aren't slow
• Mobile websites are not slow (well...)
• Hybrid applications can go to the market

7. @tryshchenko
React Native / PWA / Cordova
• React Native is NOT HTML in WebView
• Cordova is HTML in WebView in App.
• PWA is a website on steroids

8. @tryshchenko
React Native / PWA / Cordova
• React Native isn't HTML in WebView
• Cordova is HTML in WebView in App.
• PWA is a website on steroids

9. @tryshchenko
React Native Application View
View
Scroll View
Button
List View
Image
TextInput
TextInput
Switch
Alert
Toast
Slider
Web View

10. @tryshchenko
React Native Application
View
Scroll View
Button
List View
Image
TextInput
TextInput
Switch
Alert
Toast
Slider
Web View
JS Engine
React
Native
JS code
FS Plugin
Maps Plugin
Charts
Plugin
Location
Plugin
Bluetooth
Plugin

11. @tryshchenko
React Native Application View
View
Scroll View
Button
List View
Image
TextInput
TextInput
Switch
Alert
Toast
Slider
Web View

12. @tryshchenko
React Native Application
View
Scroll View
Button
List View
Image
TextInput
TextInput
Switch
Alert
Toast
Slider
Web View

13. @tryshchenko
Cordova Wrapper
View
Scroll View
Button
List View
Image
TextInput
TextInput
Switch
Alert
Toast
Slider
Web View
Your Cordova app is
rendered here

14. @tryshchenko
Web ViewYour PWA

15. @tryshchenko
PWA is a web app which also can
(optionally):
• Work offline
• Be added to home screen and be configured to work
fullscreen
• Send push notifications (Android only)
• Handle jobs when app is closed (Android only)
• Don't need to be deployed to store and can work as a
regular website

16. @tryshchenko
Something is missing:
• Push notifications on iOS
• Background sync on iOS

17. @tryshchenko

18. @tryshchenko
Milestone 1:
• Smart / Dumb components everywhere
• HOCs

19. @tryshchenko
Milestone 1:
Logic
Presentation
Logic
Presentation
Logic
Presentation

20. @tryshchenko
if. else.

21. @tryshchenko
Milestone 2:
• FE repository is totally independent
• Config with API host
• Replace cookies with JWT
• CORS enabled for all endpoints
• Get rid of BE-generated HTML templates if used
• No configuration is stored in HTML

22. @tryshchenko
Milestone 2:
anotherhost.commyhost.com localhost
myhost.com API
cookie is sent cookie is
dropped
cookie is
dropped

23. @tryshchenko
Milestone 2:
anotherhost.commyhost.com localhost
myhost.com API
JWT is sent
JWT is sent
JWT is sent

24. @tryshchenko
Milestone 2:
• Front-End repository is build and deployed separately
from API (which better put to api.yourcoolwebsite.com)
• Back-End repository doesn't know anything about front-
end except SSR

25. @tryshchenko
Milestone 3:
• Learn what Dependency Injection and Inversion of
Control are.
• Create abstractions for Local Storage, Cookies
• Create abstraction for XHR layer
• Create abstractions for device API's (IO, Location,
etc)
• Add state serialization and persistence mechanism

26. @tryshchenko
Inversion of control

27. @tryshchenko
Inversion of control
Logic
Presentation
Logic
Presentation
Logic
Presentation
Persistent storage
adapter
Local Storage / Session
Storage
Props
Persistent storage
adapter
Native app persistent
storage
Props

28. @tryshchenko
Milestone 4:
• Add Manifest, Meta tags, all related icons and assets
• Configure "Add to home screen" modal window for Android
• Full screen, theme colors, loading screen

29. @tryshchenko
Milestone 5:
• Create abstraction for service workers
• Create caching mechanism and choose caching strategy
• Come up with mechanism for remote force cache reload

30. @tryshchenko

31. @tryshchenko
Offline-first design

32. @tryshchenko
Milestone 6:
• Configure push notifications
• Configure background jobs

33. @tryshchenko
PUSH PUSH PUSH
• HTML5 Push API
• APNS, GCM.
• Amazon SNS ❤

34. @tryshchenko

35. @tryshchenko
https://docs.aws.amazon.com/sns/latest/dg/sns-http-
https-endpoint-as-subscriber.html

36. @tryshchenko

37. @tryshchenko
Monorepo and it's management
• NPM link
• Lerna

38. @tryshchenko

39. @tryshchenko
Milestone 7: UI/UX
• Don't try to make polymorphic set of components to
share between web/mobile.
• For Web: OnsenUI, Ionic
• For React Native: React Native Elements, NativeBase

40. @tryshchenko
How not to fuck trick yourself:
• Disable overflow scroll for iPhone in CSS
• Disable zoom + use correct viewport*
• Define fonts explicitly, as some phone vendors allow people to use shitty
fonts as system fonts
• Some people still use iPhone SE, check your app on it
• Say NO to HTML <table> and any table-look data representations in your app.
• People can rotate screen
• Use correct keyboard types
• Make sure your UI library is cross-platform

41. @tryshchenko
Tooling
• create-react-app
• create-react-native-app
• expo
• expo-cli
• ionic-cli
• workbox

42. @tryshchenko
Discouragement

43. Questions?
Oleksandr Tryshchenko @ Relay42
tryshchenko.com
@tryshchenko
Feel free to reach me
EN/UA/PL/RU
Song: Uniq - Art of Silence