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
Tweet

Other Decks in Technology

Transcript

  1. CLOJURESCRIPT & REACT NATIVE
    Native mobile apps in our favourite language

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  7. REACT NATIVE - DEV EXPERIENCE
    ClojureScript and React Native vikeri

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  18. THANK YOU FOR YOUR TIME!
    Questions?

    View Slide