How to build fast apps in a fast way!
I’ve being building stuff since I can remember, I just love to build new things, and don’t take my word for granted, you can check it on Build New Things website.
By putting myself into a position where I have to build things every x weeks, I’m forced to optimize everything to build fast, good looking and scalable prototypes in the fastest way as possible without compromising quality.
You can say whatever you want, I’m not going into this crazy flame-war about native x web app, but let’s face it, I’ve build both, and web apps are faster to build a prototype, and I still feel that’s kind easier to find resources, and help when dealing with usual web stuff (html, css, js).
The Stack
The stack I’ll advocate in here is not a silver bullet, take it for what it is, a set of tools I’ve nailed down as the best and faster to build my prototypes. The stack can and should change if there is any particular need that is better suited to a different tool.
P.S. Not going into my back-end stack on this post, maybe on a next one.
I usually go with:
- Ember.js
- Cordova
- Handlebars
- CSS (no S(A/C)SS)
- HTML
- JavaScript
Why Ember?
Some may ask, why not go with cordova, build the HTML you need and get this done?
Despite loving building things as fast as possible, we need to take into account the maintainability and scalability of any project.
And in this case, I strongly believe that this trade off pays itself really quickly, by making your code way better organized and easier to work on. So that’s a safe and smart choice to go with it.
Creating your project
Start by making sure you have the libraries we need to start our work, and setting up your environment.
Setup + Creating Ember app
This will install both primary libraries:
npm install -g ember-cli
npm install -g cordova
You are ready to create your project:
ember new my_freaking_awesome_app
Ember.js + Cordova
The amazing folks from PoeticSystems built an awesome project that handles Ember.js to Cordova transition and integration, automatically. This might seems silly if you’re used to cordova, but is quite helpful for those that don’t want to figure it out or want to make this an easier no brain compile process.
You can check the project on their github, but bellow is everything you need to set it up. First let’s install it, so go into your project’s folder and run:
ember install ember-cli-cordova
This will install it, but not set it up, then you need to use a specific generator:
ember generate cordova-init com.my_company.my_freaking_awesome_app
If you isn’t a mobile developer, stay calm, this whole com.my_company.my_freaking_awesome_app is basically an identifier to your app, it must be unique, and it’s usually composed by a company’s name and your app’s name. For the apps I build for example I go with com.buildnewthings.appname
The command above generated the Cordova project but for iOS only, you could generate the android version instead by adding:
--platform=android
No worries, if you’re building for both, just generate for iOS, we can add android later on Cordova itself.
Developing and Building
This is really straightforward.
Development
It doesn’t get harder then this:
ember serve
Just run this in your project folder (in our case my_freaking_awesome_app), and it will start a web server under localhost:4200, with live reloading, as you update any HTML, CSS or JS file.
Most of the modern browser have a way to simulate mobile devices, I usually use Chrome for that, mostly because it can simulate Android and Iphone devices really well, it’s a feature you will find on the inspector.
That’s mostly what I user while developing locally, before start testing into actual devices.
Building
When building, you just need to run this command from the project’s folder:
ember cordova:build
In case you want to build it for a specific platform:
--platform=android
and when ready to make it to production don’t forget to add it:
ember cordova:build --environment=production
All of above commands will generate the project inside your app folder > cordova > platforms. There you’ll have platform folders, like iOS and android, from that folder you can just open the projects, for example, the Xcode project and run in on the simulator or on your iPhone.
Simulators
Simulator can be tricky, depending on the platform, you might need to install dependencies and some packages, I won’t go into that here, but you can easily find it online.
What about Ember.js?
Well, I presume you know HTML + CSS + JS, maybe even ember already, but if you don’t there is a lot of great material around their website that can easily help you to get things stated.
I’d recommend you to start on their Getting Started section or Tutorial Section
Ember.js uses handlebars internally to hand it’s templates, a relly lightweight but powerful library, if you haven’t tried yet it will be a great experience.
Quick Tips
- Please, do use the latests version of Ember.js and Cordova, you would be loosing a lot of great work and improvements if you don’t.
- Don’t go for Ember.js controllers, it might be tempting but try to go for components instead, controllers will be deprecated anyway.
What’s Next?
This article is an attempt to help you all out there, that are willing to build new things into accomplish it faster and easier. It’s a new approach to what I started on Build New Things and I hope to write more stuff and find better ways help you all.
I don’t know how you will react to this article, so make youself comfortable to ask me on twitter or on the comments. Depending on the reaction and questions I receive I might write a more simple of more robust article, going into details or moving forward to other topics.