React native for dinosaurs
Fair warning, this is a cathartic tale. I am old and in the field of software engineering, nothing makes me feel older than Javascript in 2017. The first time I shipped production Javascript code, Firebug was just a glint in Joe Hewitt’s eye and “web-development” could be summarised in one GIF:
As all senior software engineers know, all comedy in this industry is dark comedy. You laugh because the clown is crying.
Editor setup
Perhaps you’ve seen a video or two and marvelled at @wesbos working his editor like a finely tuned instrument. If you have an ounce of sense, you’ll download Atom before you even finish watching the first video and be on your productive way. I however decided to spend a couple of weeks yak-shaving Emacs to save me the trouble of learning a new editor. Mind you, the last time I used Emacs to write JS, nxhtml and mumamo were the bleeding edge, so the learning curve was steep. Long story short, after trying out pretty much everything on the CategoryJavaScript page, writing^H^H^H^H^H copy-pasting hundreds of lines of elisp and seriously looking and moving the whole project away from react-native to native code, I ended up with,
;; -*- emacs-lisp -*-
;; Time-stamp: <2017-02-13 14:12:32 alok>;; web-mode, react and friends(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.jsx?\\'" . js2-mode))
(setq js2-basic-offset 2
js2-bounce-indent-p t)(add-hook 'js2-mode-hook 'company-mode);; Setup a repl
(require 'nodejs-repl)
(add-hook 'js2-mode-hook
(lambda ()
(define-key js2-mode-map (kbd "C-x C-e") 'nodejs-repl-send-last-sexp)
(define-key js2-mode-map (kbd "C-c C-r") 'nodejs-repl-send-region)
(define-key js2-mode-map (kbd "C-c C-b") 'nodejs-repl-send-buffer)
(define-key js2-mode-map (kbd "C-c C-l") 'nodejs-repl-load-file)
(define-key js2-mode-map (kbd "C-c C-z") 'nodejs-repl-switch-to-repl)))
All this was done before I fixed a single bug. Totally worth it. As can be seen from the opening screenshot, it still has trouble understanding flow.
Flycheck worked out-of-the-box which was super. If it wasn’t for melpa and use-package, I’d probably still be fumbling about.
Getting started
This was somewhat easier as I use a Mac for work. After following the excellent guide I had the HelloWorld app running on my phone. Along the way I learnt that genymotion requires VirtualBox on macOS and VirtualBox has a problem with Docker 1.12 (which uses xhyve). You’re probably better off using a phone for development as your app will be a lot more responsive and its considerably less frustrating to use.
I also discovered that the install task fails on my Huawei phone. Perhaps updating gradle to 1.5 will work. Perhaps I need to downgrade to 1.2.0. Anyways, for now I use
adb install -rt app-development-debug.apk
Since I use dd-wrt both at home and work, it was easy enough to configure a DNS name for my laptop which runs the backend. Thus my app would work at home and work without having to change configuration. On macOS, setting your hostname is a non-trivial exercise. I did this a long time ago and I’ve forgotten how it is done but it is possible that you will have to boot into recovery. Thankfully the setting has persisted even after upgrading to Sierra.
Understanding the infrastructure
Unlike a native application, you generally don’t need to keep updating your application. Your host laptop serves the JS files to your app. Shaking your phone will bring up the debugging menu where you can simply reload the app. You can set the debug server URL under Dev settings and use WiFi. Hot reloading is just the cherry on top.
You can use this architecture in production too with Code Push. This is especially useful in our case where the API is not stable yet and we want to move our users to the latest version without an explicit upgrade by the user. Suppress all those misgivings you might have, you want to be productive, don’t you?
Next time
Looking back I realise how little there is to write about something that kept me occupied almost full-time for more almost a week and a half. In two weeks time, on a very special episode of this blog, I will pontificate on the react-native architecture and sell my opinions as fact.
