ClojureScript and React Native

An introduction to React Native and how one may write those apps using ClojureScript.

Transcript

1. CLOJURESCRIPT & REACT NATIVE Native mobile apps in our favourite language
2. ME Viktor Eriksson vikeri Swede living in Stockholm Worked ~2.5 years with Clojure(Script) Working with ClojureScript at pilloxa.com trying to improve the life of people that take medication every day. We make a connected pillbox. We’re hiring ClojureScript and React Native vikeri
3. OVERVIEW OF PRESENTATION React Native ClojureScript + React Native Dev Environments Testing CLJS + RN vs Native (Java/Obj-C) ClojureScript and React Native vikeri
4. REACT NATIVE Developed by facebook and allows writing native mobile apps in JavaScript How does it work: Native components that are controlled from a JS “thread” in the iOS/Android app How is the dev experience: Very similar to developing normal React web apps (JSX) Difference from Cordova/HTML5: No web view and no HTML. All UI components are native but controlled from JS ClojureScript and React Native vikeri
5. REACT NATIVE - HOW IT WORKS ClojureScript and React Native vikeri NATIVE - “Client” Actual on screen rendering and event triggering JS - “Server” Business logic and “Server side rendering” What to render Events BRIDGE
6. REACT NATIVE - DEV EXPERIENCE Components are styled with inline CSS - Flexbox - Not entirely cross platform (some design quirks) Interop system between RN and Platform Native - Purely native components can be embedded in RN - Purely native functionality can be called from JS ClojureScript and React Native vikeri
7. REACT NATIVE - DEV EXPERIENCE ClojureScript and React Native vikeri
8. WHY RN WITH CLOJURESCRIPT JS interop is trivial Web development with ClojureScript has been heavily focused around React ClojureScript and React Native vikeri
9. REACT NATIVE + CLOJURESCRIPT Available Clojurescript React wrappers (om, reagent, rum etc.) work more or less out of the box with React Native since RN input are plain React components Two compilation stages: ClojureScript compilation and the React Native Packager bundling means slower iterations React Native Packager is facebook’s own take on JavaScript bundlers (optimized for speed and full of hacks) ClojureScript and React Native vikeri
10. REACT NATIVE - JSX vs. CLJS ClojureScript and React Native vikeri
11. REACT NATIVE - JSX vs. CLJS ClojureScript and React Native vikeri
12. REACT NATIVE - JSX vs. CLJS ClojureScript and React Native vikeri
13. DEV ENVIRONMENTS The two build tools for Clojure are represented: • boot-react-native: Uses boot, works closer to the RN packager but is slower and inferior out of the box experience (personal experience) • re-natal: Uses leiningen, runtime errors are not traceable, templates for re-frame, om.next and rum The most commonly used frontend framework is re-frame (reagent) ClojureScript and React Native vikeri
14. TESTING CLJS Logic: All ClojureScript logic can be tested in NodeJS by doing the following: • Mocking out React Native using react-native-mock • Mocking out required libraries and images using mockery Components: One may test components for JavaScript errors with enzyme’s render function Integration tests: Todo ClojureScript and React Native vikeri
15. RN + CLJS vs. Native (Java/Obj-C) ClojureScript and React Native vikeri RN + CLJS + ClojureScript! + Transfer app from iOS to Android in 1 week + Powerful abstractions available: om.next, re-frame + Fast development speed NATIVE (Java/Obj-C) + Better performance + More mature community + A lot more documentation and tutorials + The majority of mobile dev resources expect the code to be native + More mature API
16. RECOMMENDATION ClojureScript and React Native vikeri Comfortable with CLJS and digging around in source code: Write as much as possible in RN + CLJS but switch to Java or Swift/Obj-C for performance critical tasks or areas where good libraries already exist Else: Performance: Go Native (Java/Obj-C) Development speed: Cordova/Ionic
17. GETTING STARTED - boot-react-native ClojureScript and React Native vikeri
18. THANK YOU FOR YOUR TIME! Questions?