No Strings Mobile App Development for Clojure

0 0

my name is Zachary Kim I'm going to be talking about my experiences with native mobile app development enclosure first a little bit about me here's a picture of me thinking about closure I've been working in the industry for about 16 years mostly in the consumer space I worked in San Francisco at a start-up right now but I've also worked in enterprise and in health care on the CTO at zarley which is a place where you can go to find great home service providers I've been using closure since about 2010 so this is like I think this is like pre line again days we had to like download a jar and then run at the command line yeah it's crazy and I run the closure docks project which some of you may be fired with it's a it's a community documentation and examples for closure so I'd like to get a little bit of audience participation at this point trying to get a sense for what your backgrounds are and what kind of development you're funny with if you consider yourself a back-end programmer and you can you can choose more than one if you consider yourself a back-end program or please raise your hand so back in a lot of back-end people okay front end or if you work mostly in the browser great and then finally mobile any mobile yes yes we got some old developers which is terrifying I'm really I'm really interested to see what you guys think of this I'm not a mobile developer I would consider myself more of like a back-end front-end generalist kind of person uh it was about three or four months ago I really will the way back up so I feel like maybe my experiences is representative a lot of people's experience where I would like to do mobile development but the the barrier entry is just too high right if I want to go learn iOS I'd have to go spend the time to really get into the tooling get into Xcode get into the libraries on the frameworks you know get my head around objective-c and and you know manual memory management all in yadda yadda and then if I also wanted to do an Android app then I'd have to go a kind of context switch into a whole different set of tools hold set of different libraries but anyway so that yeah about three four months ago I really wanted to finally cross the cross the divide and do some mobile development and more specifically I want to I want to do my mobile development enclosure and unfortunately that was not a really easy thing to do there's a couple of different ways you could do it it was you know mostly mostly loading up closure script on a website and either sticking that in a hybrid app a webview or just loading up a web page in the browser and will kind of get into those those approaches later but if we want to back up here for a second and really talked about what are the approaches that I could have taken to do a mobile app really there was four that I had kind of considered right so you have the native we talked about that a little already objective c and java and xcode eclipse IntelliJ respectively you know each one has its own simulation has its own kind of way of shipping and maintaining the app we've got the cross compilation mechanism this is where you want to work in us in a language that you're used to and that you enjoy Sega States closure you would cross compile that to either machine code on the step on these disparate platforms or compile it into actual source code so you know the kind of kind of a source translation type of thing we got the hybrid approach this is probably the most i would say the most popular non-native and i'm going to in trouble a little bit because it's technically you are running a native app and you are using native API is but the UI itself has done in html5 technology so you've got your JavaScript you got your html5 and you're rendering your you eyes too webbing right or maybe a set of web use in your in your app and and are able to still use the native api's but still but you don't really get that kind of like native feel of your app let's see and then finally the the last one on the list embedded compiler interpreter and this is when you have a interpreter running directly in your app live in your app alongside the native code kind of accepting inputs and running code and creating these creating native elements and we're going to talk about that a little bit more in a second we're first I have to stop I have a confession I've gotten you here under false pretenses because I click baited up the title of my talk a little bit it's it's no strings mobile app development enclosure that's completely wrong there's a ton of strings there are many many strings so many that the first slide should probably look a little bit more like this you're going to want to read that fine print and that is to say any of the four approaches that I outlined I'm gonna I'm gonna I'm going to try to champion one specific approach here not to say that you can't build great mobile apps with any of the other three mechanisms or three approaches but ultimately the thing that was important to me was building great great mobile experiences like I want I wanted it to be so the person using the app could not tell that it was not a native iOS or native Android or native Windows Phone app but really you can build great mobile apps in any technology it's really about the end result and it's more like just being it's more like being in a relationship right there's a certain everybody's crazy at some degree and and you just got to find the kind of crazy that you're that you're okay with in the end I don't want to go full native I think we covered this a little bit I didn't want to go full native because I wouldn't be able to use the tools and the ecosystem that I love to use I don't want to do a cross compilation because frankly it didn't and I think doesn't exist I didn't want to build it I don't wanna go hybrid because I wanted more of a native feel to my apps and luckily that so that just leaves that fourth option right embedded JavaScript interpreter or embedded interpreters running in your app and luckily there's a project who's crazy was just right for me and it's called titanium it's put out by a company called appcelerator and it implements this embedded JavaScript interpreter on a bunch of different platforms and we'll get into that here in a little bit it's been around it's open source I think it's patchy license been around for five or six years and it's pretty stable as far as I can tell it's got great documentation searchable they have their own kind of stack overflow ish type site it's imperative meaning that you imperative ly build up your your UIs and your code and we'll see that a little bit later and takes a lowest common denominator approach to kind of the cross-platform stuff so what that means is when you've got we give a button in titanium you have a corresponding heavyweight button in iOS which i think is called the UI button and an Android which is called a button and it used the same JavaScript class to interact with these things I'll try to interact with the button now if you have a programmed in swing this might make it a little bit nervous but it's actually it's actually okay because they take out they take like a plus approach to this right where even though it's the same button you're using the same button on the JavaScript side you have the ability to configure platform specific things about that button and so you know for example on on iOS there on iOS there's no or excuse me on yes on iOS there's no there's no back button and so the button can't Beast be selected by like a rocker switch or anything like that and on Android that is the case right so on iOS on Android you can specify certain options about that directly in your code that are Android specific and for cases where there isn't parity between the platforms for example on iOS there's something called a navigation window and it's a way that iOS manages kind of the back button in your app there's no kind of corresponding concept over on the Android platform and so there's just a there's just a single class on the titanium sorry for that sorry it's it's a that makes it seem really complicated it's actually a lot less complicated and it'll become clear when we get into some of the code of course there's react native now this wasn't kind of available when I was looking around but it looks like it's going to be a really really great option here right now it's it's oh yeah again same embedded interpreter it's for iOS only right now but they're adding android support your UIs are built declaratively and I think a lot of us in this room have had had a chance to work with react on the web and seen it as a transformative technology so really excited to see this project kind of like mature a little bit and hopefully i'm hoping the accelerator people on the and the react native people can kind of get together and cross-pollinated a bit because there's some really great things about titanium there's some really great things about react native and and we all win in the end if they can kind of get together on that a little bit of an overview on okay well excuse me back up so so this this approach kind of really ticked all the boxes for me right there's a solid solid closure to jas compiler which we all know and love I'd have access to the closure ecosystem the standard library all the great tooling and the great community around closure we could run a ripple in this you know because we have this live JavaScript interpreter you can run a repple in there you can live code reload you can introspect data as you're developing your app and really what this gets you is really tight and and rich coding cycles right you have an idea you change two lines of code you hit save and the thing refreshes and and you can see if it worked or not and people seem to love to embed these things in their platforms right like I mean what's in what's a new technology that came out excuse me few few new technology platforms come out that don't have the ability or on JavaScript it's just it's just everywhere so it's got an element of future proofing of course it's not all benefits there are some trade-offs you are running in a single thread and then you just don't have the same performance potential that you do with the true native app right you don't have your other threads you don't have you don't have like the ability to do manual memory management and I'm not saying that that's a better way to build apps I'm just saying that you can all things being equal build more performant apps it turns out these aren't really huge problems though you know we have things like Cory a sink which help us manage concurrency and end time in our applications we have and titanium itself and react native have the ability to they have an escape hatch to kind of drop down to the native platform when you need to so if you have a use case for something that's very performance sensitive you can write a native module for that and interact with it with your JavaScript code of course you have to write that in the native in the native language and using the native libraries but this isn't the this type of approach isn't meant to give you an excuse to not understand your underlying abstractions right you always need to know kind of what's going on under your app or under your code it's just it's a way to speed up your development process yep so what's it look like well we've got we've got a JavaScript interpreter say we wanted to create a button this is what you do you create a button you have a title give it some properties and what that does on the java scott is JavaScript side is call over to the native side and create the native equivalent or whatever this JavaScript object right and then for the lifecycle this object excuse me this JavaScript object there's also this corresponding native object that's that's live for that same amount of time and the end the framework or the platform kind of manages that life cycle for you you you can get in there a little bit it's just it's really really ugly but it's but it is possible it's not just for UI elements we can also we also have access to things like geolocation the HTTP stack we there's a web sockets implementation you know camera any any native API anything you can do in a native app you have access to with this type of approach for example this is what how you would get notified of a user's location they pass it a call back any time the user location is updated then you get you get that back and so what I've done is really not that much to be honest with you it's I've added us kind of a very tiny closure library on top of these tools it's something you could probably recreate in a couple of hours or at least you could you could play around with yourself and that is to say it was really interesting to build this on top of titanium or this interpreter JavaScript or embedded JavaScript interpreter mechanism highly recommend you trying it out but basically this is what it looks like right so you create this provide you a nice closure interface with idiomatic closure things to build these mobile apps and we're going to go into that a little bit later I'm going to do a live demo and then I've got some demo apps I've got some videos of the mobs to show but right now just a little bit more about this later so it's got titanium bindings it's and you know like i said this one looks like here's a window with a red background there's a one button in it and the butt title the button or the text on the button is greets and when you click it it pops up an alert dialog right in addition to the x and you know there's bindings for the event stuff for all the native API is and that kind of stuff there's Ruppel integration so there's a ripple I've got a rep learning in your app and it supports kind of like incremental compilation and so whenever you save the file it basically just send your code over to this thing and restarts the app there's some state management stuff so if you're familiar with writing react apps or our own apps or you know the other react options and closures will be very familiar with you feel familiar to you it's not as good it's but it's I'd say it's about half as good but it basically allows you to say here's an atom or here's a piece of state mutable state and when it changes I want to do certain things right so for example in this in this one same window with the red background this one has a label that when you click on it in increments counter and the the text of the label auto increments there's some message based dispatch stuff which kind of allows you to like decouple the disparate parts of your application but still share context between those parts you know words that's not that doesn't really be anything but but you kind of get it when you see it and that's kind of it you know it's about 2500 lines it's really small and and it's really powerful okay so you guys want to should we do some live coding is anybody else nervous I'm pretty nervous we gotta get me get set up here for a sec let's see so I got to do close that let's see sorry I just got to unhear this thing we're gonna mirror this thing here real quick okay yes good slides good okay how's that look never see that okay perfect so on the left here I've got or yes on the left here I've got the iOS simulator right on the right here very very simple piece of code basically what I've got is this github I've got like a starter github project that I whenever I want to create a new app I just clone it this is something that I'm planning on releasing as an alpha so that everybody can kind of like jump in and see if they like something like this but basically it just gives you the skeleton of the app right so so what should we do so say we want to build an app that maybe shows you a picture or something or maybe shows you a label or a box or something like that so right now we got hello world is the text so this is a window its backgrounds white I can change the background to read kind of like we were talking about in the in the first one I can add instead of a label let's let's you know let's change us to white because it's a little difficult to see now and then say we want to add a click event let's say breeds so let's do that example that I had before message hello closure west and then maybe we reformat this a little bit more right so as you can see I'm just I'm just writing code I'm just writing code and it just shows up in the simulator it it's like it was mind-blowing the first time that I did this because I if you're a mobile developer and say your iOS celebra which again remember I'm not it seems like what you have to do is shut down the simulator and restart it every time and granted there are options in Swift and and and potential avenues where you can go with this but this is a real this is this is this is a real way to that I've built these apps that I'm about to show you and that's basically in a nutshell right I can get a little bit more complex with things like he can add animations you can say let's add say we want we want to when we click on it we actually want oh you know what I didn't even show you guys that when you click on this this thing happens okay so great hello closure Wes so and say yeah yeah and then instead of when instead of popping this alert box let's like make it like fly off the or let's make it animate up to the top and like bounce around a little bit right so I've got a so it's too we've got the label here let's move this label to and let's animate the top position 20 like 10 and then spring does it spring something well let's just try that let's see if that works well we'll see who I was not great let's see what else we got here instead of a spring animation we was just do an animation I'm just label to the top let's do a tener and so you can see that you know like that first animation didn't really work right and and I was able to find out immediately you know short turnaround time that one is a little bit better but it's still kind of stiff maybe we should add some using and see what that see how that works maybe we want to click on it maybe we just want it to like start animating though this is going to be rough on I got to import got an import core a sink here and this will be the last one because I gotta I gotta move on here but it's import so just imported core async and instead of that I just want just at the beginning the app on a weight like three seconds or two seconds and then I want to animate I want to animate this label to the top right so let's just do I had a go tune here and timeout two seconds and then I'm going to see I anime and actually I think I ready have that here somewhere no see I animates the label and top 20 right so I don't know this going to work but we'll see oh so it worked and that's half the fun not knowing if it's going to work until you try it anyway so that's probably enough that's why enough of that as you can see there's you know it's it's it's just like easy to get in there and try out new ideas you just try them and see if they work you know you have to wait for a long time you don't have to do any heavy weight stuff you just get in there and try it you know it's it's basically a what we're used to on the web enclosure for mobile app development so those are really kind of like that's really yeah not now a depth of that example so sorry on second how we doing over there ok and then let's play that ok good everything look good ok so let's look at some maps right so i'm going to show you four apps here maybe less because we're about to run out of time but uh first one is a mobile hipaa-compliant chat app I'm calling Curie I used to do some health care stuff and one of the problems was that doctors and nurses and EMTs can't talk to each other because it's illegal or at least against regulations definitely you heard it here first it's illegal for those people talk to each other no it's illegal for them to talk to each other without the correct kind of security and regulatory controls in place and so it's a it's a very tough thing to do so I thought hey why don't you play is that playing okay sorry so sure yeah totally yeah I totally change the password yeah but this is a this is the full most full-featured of all the absolute i'ma show you right it's it took me about two months it was the first one that I did so it's kind of developing the tools along with the app so it's a little rough on that side it's got a durable WebSocket connection which is which is cross-platform it'll work on iOS Android and the web it's got some DB interaction it's got a cool onboarding process which I think you're seeing right now calls out the twilio sends you a text and then you type in your code you know stuff they were all kind of used to on mobile camera will access you know photo upload and and it's got some read receipts in there so yeah how far along is it it was played up how about this one you telling me you tell me if it starts playing no oh okay okay good so this is feedback this is feedback it's a it's a way to provide feedback on on mobile experiences so you take a bunch of screenshots and then you can kind of add it annotate them in the app and and you know you can send the people and they can look them up on the web and stuff like that this is a game that I started working on called word search and the slide ignore the list there because that's all wrong but it's basically you know it's like a word game right so word search when you're a kid you would you know select thing this one has the added kind of wrinkle of collapsing the board once you select a word creating you know exciting new possibilities and now they're not they're not well it's funny you mentioned that because I was having trouble debugging the what is a valid word algorithm right and so one of the things that was really cool about this app is that it was tough to do it in the simulator because I would have to like restart the app you'll pick a bunch of words and just to get back to the point where I wanted to test and then and then test that thing and if it worked great if not you know it was like 10 or 20 second turn around time when granted i could change the the code to just set me up in that spot but since this is closure script and since it's cross-platform why don't why deny you know i thought why deny use a larger canvas right so i ported the code i mean it took like it is like five or six lines porter the code over to web is gonna be really hard to see but but what this is is all the possible states of a game laid out on a single screen right so instead of going through and like you know touching all of them basically you just put them all on the screen at the same time and look at it make sure they're they're good and enemy if you take this this mechanism farther you know one of the one of the pains for mobile app development and at least from a QA process is like does this thing work on all our devices right does it does this thing fit on all our screens and you can buy you know for iphones and you know 22 android phones and then have this cool setup where you just like you know you're like a switchboard operator in the 1930s or you could just render them all to the screen right and visually check that that they all work so this is a this is a database i pulled off the internet of android phone screen sizes and so i just pulled that in in excel i didn't use Tom's library but I should have and and just like spit that into the into the layout algorithm and just lay them all out right so now I now if I make a change to something I just checked this like dude does it work on all the android phones yeah and it takes you one second the point of this is that there are some really like when you break it when you have a platform with the reach of closure you can do stuff like this right and it's just really really exciting and then the last one so this is one that's probably closest to production it's an app store approval process right now so it should be out sometime in the next three months it's called end up is it playing ok it allows you to create a OneTouch to create a link for people to track you on the internet right and so you know the cool thing about this is that it's like literally it's 533 lines of code code on the front end it's 200 lines of code on the back end this is an app that's going to be shipped to production and I am considering charging money for and and it's like less than seven hundred lines of code it and so yeah like I said it's going to be app store soon so hopefully that will be there for you to to to check out I'm sorry Apple I didn't mean to imply that process takes three months you're the best seriously they are they are really nice anyway and so that's that's certainly that's the last demo I have and that's kind of it unfortunately you know I wanted to come today with hey here's the github project hey go download I hate play with it I just couldn't get there it's closed though and it's something that I need help with right this is not something that I can just build by myself especially if it's going to become something that we can actually ship apps with its if it's going to be something that we can that is a benefit to the community it's something that I think that we're going to need a lot of people to contribute to to make it to make it really great so yeah so wha you know hoping to have something in the next couple weeks if you want to be notified of that just there's my twitter I'll probably send a link out on that I'm ZK on github del that might be a good way to do that too and yeah that's my talk thank you and yeah again thanks for being here is are there any questions yes yeah yeah yeah it's a great question so the question is how did you know there's some magic going on there when I was saving and it was showing up on the device how does that work so there's a WebSocket server okay so where do I start let's start on the start on the back end so there's the closure compiler right it's actually using the same underlying technology the fig wheel uses there's there's a project called closure script build by the same author so that does the compiling after the compilation is done we track which files have changed and then send that over a WebSocket connection to the interpreter running on the device right another way look at this so device when I when I run the simulator device starts up immediately makes a web sock WebSocket connection to the server and then from then on anytime a file is compiled it gets see realized and sent over to the interpreter to be run it's a it's a very similar experience to fig wheel right so you've gotta start apps a function you gotta stop function or actually fig will have reload but there's a stop at function start and stop functions that that you do your setup and teardown in so basically like that does that answer your question cool anybody else yes Oh on a production now I am NOT but more because I'm I don't want to like I don't I don't Apple would get really mad if you did that and I really don't want to piss them off that might work on Android it's totally doable right and in fact i wish i could show you right now but i can literally load the app up on the the app on my phone hit save here and it changes on your phone because it's a WebSocket server right and it's a javascript interpreter running in your app it's yeah so there's definitely possibility there doable I dangerous though right if you screw up a screw up Oh deploy or whatever and kind of break the core part of your app you're Sol but yeah totally doable and it's actually a lot of fun and o compilation modes boat it works both with simple or none and an advanced there's a little bit of a performance thing there oh yeah excellent question excellent questions so I guess the way that I visualized in my head is that it's kind of a sliding scale right and a 1 / scale is the amount of percentage of closure script code in your in your app and the other side as the percentage of native code in your app i would think that games would be more on the like more native app code less closer script code personally I haven't run I keep thinking I'm going to run into a case where I think that's the best way to do it I would say it's more cultural right like if I you know like at work you know we have Iowa great iOS developers and so i would i would not recommend this for them because they're really good at writing native stuff but if i was a positive start up getting started using closure I could have one developer do crime back in and mobile Android and iOS like that's pretty that's pretty compelling does that answer your question yeah cool yeah yeah I haven't run into I haven't runs the case where I would use where I would do native full native but I'm pretty biased so yeah anybody else good yes the way short answer yes long answer is none that I was I wasn't able to overcome without with minimal like without having to do crazy stuff the way that you want to structure these apps is that any like any type performance stuff you want to do as a native library right and then you want to kind of control that from the JavaScript side I do only have a limit I mean these are the four apps that are built with it right so you know definitely might hit a wall there at some point but kind of conceptually there's nothing I can't think of a way that that you couldn't get around something like that by used by building a native module for it somebody do two more yes yes that exactly i'm sorry i've been horrible to repeating the questions so the question is how does like is there a way to write your own native code and then expose that to the JavaScript side the answer is yes and that's that's the saving grace for this platform right if there wasn't that mechanism then you would be limited by what the titanium people could put into their platform yeah all right way else good all right well yeah well thank you that's been great yeah