Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ClojureScript and React Native

ClojureScript and React Native

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

Viktor Eriksson

September 10, 2016

Other Decks in Technology


  1. 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
  2. OVERVIEW OF PRESENTATION React Native ClojureScript + React Native Dev

    Environments Testing CLJS + RN vs Native (Java/Obj-C) ClojureScript and React Native vikeri
  3. 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
  4. 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
  5. 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
  6. WHY RN WITH CLOJURESCRIPT JS interop is trivial Web development

    with ClojureScript has been heavily focused around React ClojureScript and React Native vikeri
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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