 So, my name is Vinny Arora, I am giving the stock building mobile applications in closed rep. I work as a web developer at MSD Singapore, basically I write Node.js for my day job. This is my GitHub and I am not on Twitter or Facebook, so I think we can get started. So this will be the stock structure, we are going to start with react, then we are going to do the closure counterpart, this is reagent, then we go to state management, it is Redux, it is JS library, then we go to reframe the counterpart, CLJs counterpart, then we go to react native and then we go to expo and re-natal, which are the libraries that can be used to build your mobile app, cross-platform mobile applications in closed script and JS as well. And then I talk something about Google Closure Compiler, my experience in building, so I came here six months back and I came here in October and in November I thought maybe I should build something like Slack, a very small group chat app for Singaporeans, so they can, they will be channels and they can talk to each other on relevant topics, so I thought I will use closed script for that and I will be describing my experience about what I liked, what I did not like and then I will show you a demo. So I think we can start, so I will just skim over react, how many of you know here, I have heard of react or working on react currently, so most of you just know this, it is a declarative view library written in JS and use the virtual DOM for efficient re-enter of components, basically you just mention how the component will look and the react will take care of rendering your DOM. So this is, it actually uses a diffing algorithm to form the updates, so in jQuery or in JavaScript you actually set element dot inner HTML equals some string, so you manually mutate the DOM but react what it does is, it creates a copy of that real DOM and performs a diffing algorithm to update the DOM for you, so you do not have to do the manual work and it does that in a very efficient way, so that is the basic diffing algorithm. So once you say this is how the components should look and it will then compare it with the previous state of the DOM and then defer it and re-render your component to update the real DOM. Then it is a very simple code example in JavaScript, basically this is the main function that react uses, render, button on click, click me it will increment the counter and if you notice carefully this component holds the state as well, so the state and the view are actually tightly component in this component, it is a stateful component and so this is how a very simple example of a component in react, we will continue the example in CLJS, so I will talk about reagent, reagent is a CLJS wrapper of react, so it basically exposes some closed script functions and which actually is faster than react because we use the Google Closure Compiler, it actually transpiles, compiles your closed script into JavaScript and removes extra code for you and so basically the bundle size is effectively smaller than the react bundle size and it uses a hiccup syntax for STML which is basically nested vectors, so I will show you an example, this is the example for the previous react example that I showed for the button counter, so everyone knows atoms in collusion right, so for state management like it reagent exposes an atom and we set counter as atom 0, then we mention on click and this is the hiccup syntax that I was talking about, dev button on click as STI you click me, this is the add counter, this is the annotation add counter, so basically there is no render function in here, this function gets re-render every time the state is changed, so you click a button, it increments the counter then it re-renders the whole component and then you get the output accordingly, so this is the closed script counter part of the example, so far is it like clear, okay now we go to redux which is a state management library and mostly it is used with react, it is actually independent of react but famously it is used with react and this is the simple flow, so if you have a component say and it performs some action it goes to reducers, you get a new set and you re-render, basically you decouple the state from the view using redux, so what happens is any react component if you go back, this handle click is actually not part of this component, so this becomes a stateless component, it only dispatches some action and that action is handled by a reducer which actually calculates the new state and it goes back to the component and that it re-renders, so you are basically decoupling the view from the state which is a very good thing because now redux can be used with any view library respective if it is react or not, so this will actually help us when we, when we, when I get to the topic of mobile applications in CLJS, so this is basically the redux cycle I was talking about, you have a state defines the UI, UI triggers an action, an action is sent to the reducer, reducer updates the state, the store, the store is actually a big JS object where you have parts of your state components and you then update the state, it, it picks up the state, the, the relevant component that it needs to re-render and it gets re-renders, so this is a complete cycle, so I could took this image from a blog, so just to, now re-frame is a, is a very beautiful and very functional framework, it is actually, I really recommend you to go and read the, read me of this project because it is, it is like six chapters or seven chapters is like a story, the author is really brilliant and you will get like, will sort of have a mind shift when you go through the read me, I am not asking you to develop applications in the re-frame but the re-dream is really entertaining, it is like, this guy is like really like purists, so this, this guy, mind the option, you will, you will find him on Slack, he is very active on Slack and he has made a lot of good projects, so this is actually Redux counterpart in CLJS, so it is a, it is a functional framework, it is about data and the functions will transform that data, so we will elaborate on that in the coming slides, so okay, let us go, okay, so, so in this component, if you look carefully, yeah, if you look at this function, this, this is button, button is acting, waiting for unclick and if you click me and this, this will be trigger, so this is, this will trigger a dispatch function and you mention the event name, mention the event, so an event is a vector, this, if you can see this vector, event name and percent, it actually is an event, an event is comprised of an event name and the data you want to pass, that is it and I will talk about subscriptions later as we go ahead, unclick, I think I lost some slides, just give me a sec, it is supposed to be on the side, yeah, there is a presentation library called Jobim, so I think I built a production built and some slides were missing, I am just checking, it is weird, that is weird, just give me a sec, so, okay, I started with reframe, so reframe, you will notice I missed the cycle that I was going to explain, so in reframe the component actually dispatches an event, it goes to event handler, if there are side effects, you can handle that by effect handler, then you update the DB and it goes to the subscriber and view actually subscribes to some data and view gets re-rendered, so this is the complete cycle of how reframe works and I will walk you through each part, each domino, so event, an event is just a vector, you dispatch an event using event name and the data you want to give it, it is just a vector and then, so this is an event handler, it will, so register an event handler using this exposed function called range event DB, this is the event name and this is your DB, so a DB is not a backend DB actually, this is a huge map in clover script that holds your state actually, so you get the DB, you get this data, this is just the event name and you return the new state, the new DB, which gets re-rendered, which will actually re-render your component, so this is, so maybe you want to do some Ajax call with the event handler, so what you do is, you still return a map, so this function also becomes pure, if you notice the previous function was pure because you given some data, you get some new data, it is only dependent on the input data and this is also pure even though it is supposed to have some side effects, so we return a map, we say okay this is going to be the new DB and okay this is not defined for now, okay you return the new DB and you say okay I will do an STTB call with this input data, so you just return a new map, so you can, so this allows you to test this function as well okay, so far any doubts and then it passes on to the effect handler, so this effect handler I called it STTB call in the previous map and this will actually get the input data, your new data will be some function that will return your data and then you can dispatch a new event, once you dispatch a new event you got new data in response, you can register a new event handler that will, new event handler which is stateless, so which is also pure, so you see you have some Ajax call you want to do, you dispatch an event, event goes to effect handler, effect handler we do the side effect thing and then this will dispatch another event, this can actually update the DB which is pure, the event handler will be pure and then you subscribe, in your view you subscribe to this data and you mention the query, what do you want to do, what what key you want, what what what slice of data do you want and then this function actually gets you the new data and then when we when we do it in totality this is how your component looks, if you focus only on this function this is the Hickam syntax, it will display the data which is which you get some subscriber, so when you click this it will dispatch an event and then the cycle I walked you through it will go through that, so you do on click it will dispatch an event handled by the event handler and then it will go to effect handler and it will dispatch a new event then you subscribe and then it gets re-rendered, so there are six parts to it but if you notice it becomes testable because event handler can be stateful or stateless, effect handler is the one where you can actually do some side effects and and you can also do the side effects in your subscriptions and so this really helped me to so when we when we are building closest script applications in for mobile you can just replace this view and put it a native view here and you will still be able to use the frame that's the key, so so in the initial slides we decoupled state and view that's because view can be anything, so initially it was web now it can be mobile in future it can be desktop it can be anything you just decoupled state and view okay now let's get okay now we come to react native we are back to the JS land this is you build native apps using react, so in the react example I showed you a virtual DOM and the real DOM in here there's a JavaScript thread which is talking to the native thread the native thread can be Swift Java Android anything, so basically since react is declarative you only you only mention this is how it should look this thread actually talks to this thread and say okay do this do this do this do this okay render me a new view, render me a new text we only write JavaScript here and we'll talk to the native thread to render that for you so the problem here is when you do animations at 60 FPS you really can't achieve that because then you will be like it'll be a large overhead so animation is something like you can get smooth animations in react native but not as close to the native that's the problem because this thread is actually talking to the native thread and that's a huge problem but some people are suggesting the idea that what if this thread told it how to calculate a new coordinate then we'll do that for you so there are really experiments going on react native and so this is how react native looks this is the view and instead of div href and any text in any span you just react native exposes some components like view text view so this is only the view part of react native okay so you only mention this and react native will render this for you for iOS and both for for Android as well okay and this is how react native in close script look likes looks like so this this thing remains the same because of reframe because we decoupled state and view and this thing is actually react native is actually you do some js interop and write the view your text and button so the only problem the only big problem in writing react native in close script is that you have to manually generate this view view elements because because in web you have hiccup hiccup can hiccup is a library written to get those dev span href everything but in in here it's still in sort of like unstructured there are some libraries they don't cover everything and so this is the main part because state can be managed for reframe because it's decoupled already so I'll I'll show you okay so till here you guys have any doubts or anything am I rushing through am I rushing through okay anytime you have any doubt please feel free to ask me okay so react native is a good platform for developing js mobile apps but in here we talk about CLJs and react native so there are two options one is expo and one is renatal expo is a very beautiful library and and it's really smoothens your development experience in js in close script as well but there are some downsides and renatal is another open source library it's maintained by the community they are really growing growing this so this is what I used I first used I wrote my app in expo first and then my app size was 24 MB I'm like this just a chatting group app so why is it 24 MB and then I switched to I rewrote everything renatal is this now 5 MB or 6 MB so that's the difference between these two but there are upsides and downsides so I lost some hair in renatal so I'll work you through that what's what's wrong and what's right okay expo it's it's it's made by some people in Facebook so what they do is they compile your code on their servers so which allows you to develop iOS apps in Linux as well so you don't need Xcode on anything it's just a software tool get users write some code they'll compile it there they'll generate a URL for you and you can send it to anyone while developing so that's a very cool part of expo and it has a CLJs template as well but there are problems okay so you don't have to worry about dependency updates basically react native is very volatile so basically you it they keep updating react native so in renatal you have to so they keep updating react native so there are some dependencies there are some open source libraries they break down so in any react native library you go to on GitHub there'll be like only for versions 0.50 only for version 47 only for version 48 then you'll have to do something but expo team says we don't have to worry about dependencies we'll take care of it you just develop your app okay but there's a problem there are many open source libraries that use the native native thread to build their components but expo team says okay we have a lot of libraries but if you don't have if you don't have what you want then you'll have to eject eject your app and then you're on your own then you fall into the trap of dependency updates so expo is it's good but yeah if you want any customization then they'll be like okay this is the pipeline please submit your request here we'll look into it because it's free service so you can't really like criticize them it's so yeah so the app size is actually your expo modules what it does is if your apps app uses like five modules fire native modules expo actually ships with 15 to 20 because in the future if you want anything you just type it on and send an automatic update that's a good part but your apps the app size increases to more than 20 MB because expo itself is 18 MB of modules so that's the problem so renatal renatal is a really nice library initially there was a lot of problems with it but they are actually improving it and it's a good developer experience I would say but not just works like expo so because of the dependency update problem because you'll have to link the native modules yourself so there are a lot of problems you'll fall into but in the end you have the Google Closer compiler as well and it can really like decrease your app size so it gives you complete freedom but you're on your own like you can't do anything else yeah it's good so I'll tell you about Google Closer compiler for Google Closer compiler is actually it's for JavaScript it's actually you have to write your JavaScript app in a certain way so that it can actually cut off the extra and dead code so your JavaScript bundles actually comes down to like very less size and it has three levels whenever you build a bootstrap or closer project for the web as well there will be an option in project or CLJ for the Google Closer compiler levels so you can choose to put it as none at simple and advanced and the problem is you'll have to if you're using a third-party module then you'll have to you'll have to provide something all externs externs is externs.js basically that file is actually declarations of the variables used in the library so Google Closer expects that if you provide that it will help you reduce down the app size so it's a really nice piece of software because this because of this close script can actually build a very small bundle sizes of JavaScript and faster than react so yeah my experience and some thoughts and advice on what to do and what not to do if you ever think of building in close script application for mobile I'll tell you what I liked it's trivial to add new features after initial setup I think it's true for all closer projects and our closer projects because it's really declarative and it's like it becomes addictive once you get used to it because because of functional programming basically and because of Lisp so that holds true for mobile development as well because it's and reframe because of reframe as well and hot code reloading there's a software called fake wheel so even for react native it works so I'll show you in a while and amazing of an idiom slack forever like if you are if you are in deep hell of code and then you can just sometimes I've seen people writing down their whole pasting their own closest stack error stack on slack and they still get answers because people there are really nice and there are two channels on slack I haven't written about them the CLJs are in and there's one more re-net all channels also there and there's also expo CLJs so there are really nice people who will not lose their patience if you ask them questions and they'll really they some of them really helped me and most of the maintenance of even re-net all maintainer even reframe maintainer you'll find them there and you can ask them anything and they'll respond you so that's that's what I really liked because I couldn't have made that happy for them without them because I got stuck something for a day or two and I was like I'm done but they really helped me out okay but it didn't like there are some gotchas made basically in the JS interop you do with closure and navigation was still not polished I'm not complaining because it's open source you can't really complain that oh it's not working because I've seen people okay I'll tell you the react native story actually react native is struggling with navigation it at least was in November 2017 because Alibaba announced native navigation air when we announced another navigation library react navigation is another different library so all of them are announcing new navigation libraries and there's no community standard for navigation and and react navigation was something that people really liked and then the maintainers walked away and then people started bashing them over we walked away and there was this huge threat to navigation so react navigation when I was using it in November 2017 it was really unstable so I had to do some compare compromises on the app UI so yeah but still it works and people on slack on closure slack they have actually built wrappers around it and they really helped me with that as well with explaining me everything so stack workflow is not a good option for closure I would say maybe for closure you can still find some stuff but for this area like closure close script for web close script for mobile this is this is this kind of questions you can't find on stack workflow so I really suggest if you're doing close script app development you can also have a new tab open of slack CLJ's are if you it's not like I got stuck I go to slack it's not not so I suggest you do like try very hard fly one or two hours if you don't then you can ask a simple question then they'll reply so close slack is really powerful then okay then now I can I think show you the demo so the app UI is not like like that what you expect from as a closure developer so you don't criticize me for the app UI but I've tried my best okay so here what I'm doing is I'm compiling the CLJ source code that I've created I'll also show you oh sorry this is my project and basically a CLJ's project with the frame looks like this on mobile you have some screens which is the view layer of your app and you have some events this this is where you store the event handlers you have some effects you very sort of effect handlers it's not it's up to the programmer actually but I like to decouple them and I'll concentrate on this file as well because I told you that you'll really struggle with the view layer of the react native because for web hiccup has taken care of that on react native there's no like standard library for that this is where you I generate all the view layer and then use them in screens subs is the subscriptions part and DB is the main DB that the whole closure map that you use analytics is I put Google analytics in so and Firebase for database so I'll tell you what the app is it's a group chat app and it uses Firebase on the back end I put in Google analytics as well and so the so this router is for navigation I think we can ignore it for now so you have screens events effects and anything you want to do like in the on-screen if you have a button tap you dispatch an event you you send it to effects effects use the analytics to like pass it to Google analytics and then it dispatches an event okay gone I'm done this but there's no subscription because it's asynchronous you don't need to re-render anything because it's just asynchronous and for Firebase actually you I pull on messages so I do that when the component is rendering so I'll explain I'll show you the app first and then maybe I'll show you the how the structure works so if it was running for my presentation actually so okay so you first compile your CLJs into a JS bundle then JS bundle is picked up by the JavaScript thread and it talks to the native thread yeah and once it's compiling now I have any questions or doubts something not clear I've only written one JavaScript yet so this has nothing to do with mobile but I've written I've only written one I see the closures to that and I used reagent and then I used reagent I basically just dove right in and I ended up using reagent forms yeah and then that was before I was aware of reframe and then I found that I couldn't get out yeah because you have to find a way to decouple your state from view because in the agent it exposes a you it has a mechanism for handling your state as reagent atoms but reframe really like separates your concerns about state and view so you can actually just write view and not get lost in the view and just tell it to just dispatch something and then you change your mind and just go to reframe and let it handle something then go back to view so it really helps you to develop faster so reframe even if so it's a so the read me is really entertaining I'll still stress on that and this guy is really like you don't need to I think you don't need to know closer for that for the read me and he explains he's all diagrams water cycle and all everything he'll explain it really like convinces you how dedicated he is yeah because yeah that's what that's why react apps also struggle because you are handling state and react and all then redux comes in but since JavaScript is very verbose I mean in redux you have to write a lot action creators reduces then go back to state and then if you want to do acing actions there's a new redux library reduxing and you do that so there's a lot of stuff but reframe is really second and really I don't know really productive like really okay so I think this is okay yeah so then once your JS bundle is compiled then you use react native good on iOS okay so this is my app I don't know what I was thinking when I've made this app because I thought Singaporeans will love it and I release it on play store as well so there's only one user that's me yeah can you see this text oh this is my presentation sorry yeah this is the sign-in screen this is this code renders the screen and there are some subscriptions subscribe subscribe subscribe this is the state this r slash atom is the reagent atom and I say username password this and this is something I had to do I've struggling something you can ignore this and on input change is a function I'll talk about it on press is the function that's called when you press on register or log in so you basically define a function and in the lead block you basically write down what do you want to do okay this is my state these are this is the data I want this is these are the functions these are the handlers and then you start your main view layer this is the view layer this is the container view this is the CSS if yeah it is the CSS so this is a bad practice actually you need to refactor your styles into a separate file so this will look more clear but I was like okay I'll just build it then if DB is initialized you I used to library react and animation I don't remember animated text and then you do this so if I if I change anything yeah so if it will actually hot code loaded the app and then it got back okay and you can choose to do that or you can re-render it depends on the DB actually so if I go to DB this is that DB okay I'll come to that I can actually meet up meet up chat here and it will reload it and so this really enhances your development experience so you just do something here okay it's working just like the web okay now this is so I go here for my to register it's talking to Firebase now oh there's no Wi-Fi so Wi-Fi Wi-Fi okay anyways I'll show you meanwhile yeah so in here this is the login button actually which you can't see right now okay if you click on login this on press function will will be invoked and I pass in login user yeah I pass in login user and if you go go to yeah this is this is on press you get the event I find the event and then I do some validation and stuff if it's invalid I dispatch event and user otherwise oh if it's not valid sorry if it's valid then I dispatch this event and pass in the user user is comprising of username and password basically and I trim the password yeah and then if if the if the input is invalid then I show please enter both username and password something is missing yeah that's it now after this you get the channel screen I don't know if you notice there's a transition there that's because of react navigation but you can't use it extensively there were some problems I filed an issue for that but there I couldn't like get any solution so yeah so this is the channels page channel screen I get so so I made make sure that if you want to add new challenge I just update the firebase TV and this will actually subscribe to yeah it will actually subscribe to the channels it fetches from firebase so this is the channels big data that I just render it on there and so basically if I don't get any channels I just show the loading screen the way it was showing because there was no Wi-Fi and then you basically this is the view layer so for doing mobile applications in closed script you just need to learn the two things view and reframe the reframe is really easy because if you go through the read me properly and it will really invoke your interest in closed script app development but the view layer is what is like this where you scratch your head a lot like sometimes they expose object or default since they expose object it was you would you have to like try to find out what they are doing so okay so now you go to channels you go to MRT and then you send and it's sent and then you in here you get I just sent a hello world message and also this is empty now if I go to DB so what I do is if I restart the app now I'll already be I'll be automatically signed in into my because I stored the asset set the user in my local storage so I'll cover the view part separately how you require how you do just interrupt in a while but so you set item in local storage you get item and you delete item so for development I sometimes I had to if I had to debug then I just do this then I delete the yeah and if I refresh I deleted my user and back to the login screen okay okay now this is this is so there are basically three screens the login screen the channel screen and the messages screen that's it these are the three screens I try to add some more screens but like okay it's just released first okay now so if you look at this is where the meat of the view layer is this is actually you first require react native then you use this function adapt react last react native dot text because in the slides if you notice I showed a one second you see this view text you text this is what react native expose in JavaScript but in here you have to do this stuff you have to write this on your own dimensions touchable highlight is button you take text text input then you take flight list clipboard alert linking is different linking is basically for URLs clicking then there's react navigation this is the meat of the close-get mobile application so this file is really dirty for any close-get app you have written if you find on any GitHub they have a separate file for view defining view which is where everything this sort of stuff will be done so once you're done with this then it it becomes really easy because you go to screens you define your container because you have you know what so what a view is and then you know what you have the loading screen sign-in screen and once you are you have figured out your view layer then you can go to the reframe part reframe part as you know you can already it's already because decoupled so you can separate your logic layer and do anything here so I'll show you events so this is an event so very basic event this is the event name you get DB you say bool so DB initialized pool I said true false these are the event handlers this is so I told you about state stateless events and stateful events this is a stateless event this is this event is supposed to be like with side effects but I handle it in the effects yeah this is you need to get channels from phase firebase and you say okay return this map get channels from firebase and this is the function you pass it okay and this is the function that gets the response and you dispatch another another event set channels in DB with some manipulation so the whole reframe cycle goes like this okay once you then you go to effects then you have the effect handlers then you basically when I'm signing in you get user from local storage this is where I do the side effect thing DB get item local storage you get user on success on error so notice I pass functions to this function so that I can define whatever function I can pass so this allows me to test this code I can pass anything as on success as anything on error and this will allow me to test this code easily these are the effects and then then if I go to subscriptions these are this is a very basic subscription so I made it very generic I need the key for this value so I pass in key I get the value for DB and this is channel messages so channel messages is what this screen uses sorry this screen when it gets render it will collect all the data from firebase fall out for all the messages and it subscribes to channel messages and subscription will say okay I'll find channel messages in here okay and if there's an error this is just a handling code so we went through the whole loop using subscriptions and I think yeah I think we are we are done and for Google Analytics it's just simple this is something just JavaScript you require Google Analytics the tracker then you initialize so yeah and after this what else yeah I think I'm done for this talk you have any questions yeah it's open source because I lost faith that it's not going to work open source yeah you find yourself trying to when you want to do something in CLJ you find yourself trying to do it in JavaScript plus and then translating it initially I used to I've made I made a dashboard for my previous company in CLJs and initially I used to fortunately I had a good boss and he used to like comment don't write JavaScript don't write JavaScript it's exclusive so then then I made the dashboard after that now I'm trying yeah well but I write JavaScript one day job so sometimes like it mixes up it's like colleagues saying oh why you're writing us braces before the function yeah so any other questions any doubts about this app or anything you didn't understand or so yeah yeah so analytics analytics you can yeah basically but if you require react so the library is this react native Google Analytics bridge it's a native module so you have to do something like a native link react native analytics bridge after you install it after you do npm install then after that you do this link but export does not allow you to do this they say we already have something use that but we need all you can do this so it it attaches some native code to your Android and iOS projects and then you can just use it in here and then but there's a problem once you do this then you go back here then you control see then in line figure and then it compiles everything then you are back but in see an expo since you don't need to do this you just require expose slash this library they'll give it for you give it to you in that set any other questions