Slide 1

Slide 1 text

CLOJURESCRIPT & REACT NATIVE Native mobile apps in our favourite language

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

OVERVIEW OF PRESENTATION React Native ClojureScript + React Native Dev Environments Testing CLJS + RN vs Native (Java/Obj-C) ClojureScript and React Native vikeri

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

REACT NATIVE - DEV EXPERIENCE ClojureScript and React Native vikeri

Slide 8

Slide 8 text

WHY RN WITH CLOJURESCRIPT JS interop is trivial Web development with ClojureScript has been heavily focused around React ClojureScript and React Native vikeri

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

REACT NATIVE - JSX vs. CLJS ClojureScript and React Native vikeri

Slide 11

Slide 11 text

REACT NATIVE - JSX vs. CLJS ClojureScript and React Native vikeri

Slide 12

Slide 12 text

REACT NATIVE - JSX vs. CLJS ClojureScript and React Native vikeri

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

GETTING STARTED - boot-react-native ClojureScript and React Native vikeri

Slide 18

Slide 18 text

THANK YOU FOR YOUR TIME! Questions?