Profile cover photo
Profile photo
Tim Coy
44 followers
44 followers
About
Posts

Post has attachment
Add a comment...

Post has attachment
Overview: I’ve been obsessed with SPAs (Single Page Applications), in particular pure JavaScript sites that utilize html5 history instead of using pages, for a while now.  Essentially, with an SPA all logic is done on the client as opposed to the server.  For example, for a traditional site, you call the server, the server calls the database, the server generates the entire page, and then finally the result is pushed to the client.  With a SPA, the client does all the work, the page loads nearly instantly, but the client has to then fetch the data for each section of the page, and then the client creates the html for each section of the page accordingly.  Anyways, I wanted to give Google’s AngularJS framework a go, so over the last few days I implemented this basic site for an idea I had.  

Mockups: I was trying to pick a good mockup tool.  Traditionally, I’ve used Photoshop, but as a programmer I find that it sometimes starts to become cumbersome.  Photoshop images are not very responsive, and it’s always missing the web font I want to try.  So, I started by trying out Jetstrap, which worked great at a wiring frame tool to jot down ideas.  But, ironically horrible at creating the look and feel I wanted for a unique design.  So, I switched to easel.  It’s a bit quirky as well, but it actually made it pretty easy to create the look and feel I was looking for.  

UI Layout: Now, that I had my rough design layout.  I started creating the base html with filler content.  I knew, I wanted to use my preferred UI framework, twitter bootstrap, but I wanted to have a “flat” design.  So, I originally tried out Flatstrap (twitter bootstrap modified to have no round corners, gradients, etc), but then after coding the base html I thought the rounded buttons looked better.  So, I switched back to the traditional twitter bootstrap.  But I’ll have to keep flapstrap in mind for future “flat” design projects.  And I used SASS to create my CSS files.  By using a separate CSS file, it makes it easier to upgrade twitter bootstrap.

JavaScript MVVM: Now, AngularJS.  It is very strange coming from jQuery background.  With AngularJS you’re not supposed to update the view at all in the controller.  Instead, in your controller you just call services and load your data.  Then, you need to create custom directives to do any special dom manipulation based on events.  Essentially, services load data, controllers call services and map data, directives update the ui based on events, and filters format data.  So, if you want to display a comment, you’re going to use a service to fetch the data, use the controller to set the data, use custom html markup to bind the data, and use filters to format the data.  Everything is broken down in this fashion.  Basic data binding is very easy, because it has a bunch of built-in methods for all this stuff.  But, when you want to do custom stuff, it takes a little while to learn where everything goes and getting used to separating out all your logic.  But in the end, if you do it right, it really makes things a lot better organized and scalable for larger applications.

Cloud Storage: For storage, StackMob and Parse are the two players in the storage as a service area.  These providers are great when you want to call the database from JavaScript.  They are also both very similar and very basic.  Neither does great at things like joins, relational data, basic querying like (sql server browser or mysql query browser), but when you want to quickly store JSON objects to the database from clients apps, they work great.  And best of all, everything is managed, redundant, and free.  

Logins: I integrated with Google’s new Google+ login api, that way there’s no need to create site accounts, manage passwords, etc.  This also helped out with the logic that detects if you’ve previously voted.  You can only have one vote per Google+ account.

Charts: I actually used the brand new chart.js library. This is a pretty slick library.  My responsive coding to make the charts responsive could use some more work, but they look great in chrome/firefox and are animated.

Hosting: I decided to use Heroku, it’s a little tricky to upload straight html/javascript, but once you use the static buildpack you can just use it as free host to host static sites easily.  Also, since there is no server languages, you could just upload straight to a CDN.

Overall: The site turned out pretty good.  The hardest part was definitely learning AngularJS, but now that I’m getting used to it, I really like the framework.  And I think, more pure client based SPAs are the future to real-time interactions on the web.  It’s pretty nice having no server languages and just coding straight in JavaScript.

GitHub: https://github.com/timothycoy/carpickmeup

tldr: Created new responsive server-less site (carpickmeup.com) for a weekend project.
Add a comment...

Develop a google glass app to determine how introverted a person is.   #ifihadglass
Add a comment...
Wait while more posts are being loaded