Linkedin reverting to native app = broken heart

Linkedin had one of the most polish html5 iPad app in the market but they recently decided to kill it off after countless of articles describing HTML5 as a viable solution for mobile. What triggered that 180 on their position? Well contrary to popular believes (that all html5 apps are slow), it’s not speed & animations that made them rollback, but.. memory management. Here’s how Kiran, LinkedIn’s senior director for mobile engineering puts it:

“The primary reason for that is, we’re seeing that more and more people are spending more time in the app, and the app is running out of memory. It’s not performance issues, like speed or rendering, but it’s still a big problem.”
Read more at VentureBeat

Unfortunately they never really explain what tools they use to bake a native apps from their html5 counterpart, so without more informations it’s pretty hard to make anything of this. One unfortunate truth is that dev tools for mobile web apps are in it’s infancy, and there is not quite anything like what native apps can provide.

So with Facebook and LinkedIn quitting the HTML5 boat where does that put us? Well pretty much in limbo, that tells us that most publicly listed companies do not think that HTML5 is ready for primetime and could be associated as a risk for still quite some times.

Looking further

When Zuck rolled back to native, a small company called Sencha decided to push back a little and released a video showing one of their html5 app running against the current native iphone app. Sencha has a framework called Sencha Touch, that is pretty much everything you need to make a mobile web apps that looks native. So let’s check that video:

The Making of Fastbook: An HTML5 Love Story.

Pretty impressive, I personally tested Sencha touch a long time ago and there was a lot of problems on Android, that being said Android versions 3.0 and less were a problem in themselves, the hardware quality was bad and there were lots of bugs and missing implementation in the webkit browser. The situation with Android & Sencha touch seems to have much improved.

Okay, so you are telling me I can make a mobile web app, but other big companies are rolling back but it’s possible but I probably need a big framework to do it?

Well…. not exactly. Like anything else doing an html5 app has advantages & disavantages, and it is sometime appropriate. The principal advantage is you get an app that works on Android, iPhone & Blackberry with minimal efforts with technologies you already know. You made websites when IE6 was around? Well it’s much easier getting something to work on 3 webkit based browsers.

When should I consider doing a mobile web app?

Here a few pointers:

• You have no budget to hire android, ios & blackberry devs but want big market penetration
• You are not reinventing a whole new navigation system full of animations
• Your app is principally text based
• You are still in the prototype stage where you need to iterate quickly

What about CakeMail?

If you looked around this blog recently you probably know hat I am currently working on the first iteration of the CakeMail mobile app. Our current strategy is to release a web version first, iterate a second version (ameliorations) and then integrate this app into PhoneGap and package it for app stores if all goes well.

For that to becomes to fruition I had to build quite a few components for backbone.js that handle different states in the pages(animations, topbar, menu, popin & etc). My plan was to release those components at Js-Montreal this month but life got in the way and I won’t be doing that.

Building a mobile web apps from scratch

It’s not that it is particularly hard, it is just fucking html & javascript in the end, but you definitely need to work out some issues you don’t generally encounter. I probably invested about 80 hours for now in my backbone.js mobile components, and probably need to invest a bit more to make then really solid on ios and android(4.0+).

Why not use jQuery mobile or Sencha? Well I don’t like to stand on top of the next guy, not really understanding what’s happening in the background. Plus the Cake app is pretty small & I did not see the advantage, specially performance wise, of using a big framework. One interesting thing with backbone is that you can really “bend it” any way you want and it’s something I appreciate a lot, my components try to follow the same philosophy.

I plan to do a presentation (probably next month) at js-montreal, if your interested at getting started in mobile web development and you don’t want to be dependant of Sencha or jQuery , you should difinately check that out, I got tons of tips & tricks. Here a small taste of my very unfinished slides:

Wouldn’t it be perfect if you could just give a recipe to your new developers and boom, their app environment is ready, they can get to code right away. No more fiddling with hosts, memcache, enabling by hand php modules. Just 2 or 3 commands and your done. I’m not going to go deep into a tutorial since I am still very new to Vagrant but I thought I could give you a couple of tips to get you started easily.

Video tutorial

One nice thing about Vagrant is their introduction video that helps you automate your first lamp stack. The bad news is that while it will get you 90% there, Vagrant changed a lot since that video was made and you will have to do a bit of testing to get everything working.

These slides are also a good starting point, it’s a bit more up to date and the coding style is more elegant.

Fiddling with hosts

Vagrant by default will forward the vm to your 127.0.0.1 with a special port (any port you choose). On your side you can’t use your host to forward 127.0.0.1:8080 to (for example) devdomain.com. Hosts file are only for dns not for port so it won’t help you. You could of course go to forward back the port using firewall apps and etc.

But the easiest thing to do is nothing, put your domain in your host file and then you can just type devdomain:8080 and it’s going to work since you already forwarded that domain to your localhost in your host file.

MYSQL installation

There is currently a bug when you install mysql with the default ubuntu box that Vagrant provides, for some reason chef tries to connect before mysql is ready and it’s going to throw an error.

Error executing action `run` on resource 'execute[mysql-install-privileges]'
STDERR: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

Fortunately there is an easy monkey patch until they get that worked out. Go to your mysql recipe and edit the server.rb file

139 subscribes :run, resources("template[#{grants_path}]"), :immediately
140 ignore_failure true # "Can't connect to MySQL" monkeyfix

There is not much informations about this bug, but if you look a bit there is these guys that talk about it.

PHP and it’s modules

First thing first, do not forget to add

include_recipe "apache2::mod_php5"

Or your files won’t load in your browser, you will download them since the header won’t work. In fact thinking about apache, you probably should include all of those:

include_recipe "apache2"
include_recipe "apache2::mod_php5"
include_recipe "apache2::mod_rewrite"
include_recipe "apache2::mod_deflate"
include_recipe "apache2::mod_headers"

As for php, do not forget to add all the modules you need to, your list should look something like:

include_recipe "php"
include_recipe "php::module_apc"
include_recipe "php::module_memcache"
include_recipe "php::module_curl"
include_recipe "php::module_mcrypt"

Unfortunately the PHP cookbook does not include recipe for all php modules, for example, mcrypt is not in there, you will have to copy a module recipe and add your custom modules yourself. Fortunately it’s pretty straight forward and the code is simple, here how I implemented mcrypt:

pkg = value_for_platform(
    [ "centos", "redhat", "fedora" ] => {"default" => "php5-mcrypt"}, 
    "default" => "php5-mcrypt"
  )
 
package pkg do
  action :install
end

Following that convention you should be able to get all the php modules working.

File templates

One of the nice thing about Vagrant is that you can pretty much template any file from your vm. I use this functionality to rewrite /etc/hosts for what I need.

on your recipe you do:

template "/etc/hosts" do
	source "hosts.conf.erb"
	owner "root"
	group "root"
	mode 0644
end

Then in your hosts.conf.erb you can pretty much do whatever you want with that file using ruby, you also have access to a wide range of variables from vagrant.

Vagrant, a very impressive technology

Vagrant is impressive, it’s unfortunate that it’s hard to find good up-to-date tutorials to get started, we often get puzzled by a code that should work and not because it changed since the article was written. Hope this couple of tips can help you get your environment running!

jQuery Mobile

First, jQuery mobile just entered Beta3. Lots of bugfixes but also one cool thing that has been baking for a while, real fixed footers and headers are available in the framework. Before that, jQuery fixed stuff was just a gimmick with the fixed bars disappearing when scrolling, now you got the real deal, well sort of. It’s unfortunately only available for ios5, meaning not a big lot of people will see it.

Android does not really support fixed positioning yet, it however supports overflow:scrolltouch. But it seems the jQ teams decided to only implement position:fixed for everybody. There is a nice video of the feature here.

Sencha Touch

Sencha kind of went off the radar for sometimes now, but they just announced something really hot. Sencha Touch version 2 will include a native packaging that will automatically transform your web apps into native apps on android and ios, on osx and windows.

Now I don’t know if they really went there and added ios app native packaging on Windows, but that would be legend… wait for it… wait for it… legendary! More information here.

Sublime text 2, the new holy grail of editing

Okay, I know VIM is powerful (hello sys admins ) and Emacs got a weird following but here we got a game changer. It got the snippets power of textmate (all tm bundle works, mostly), the extensibility of VIM and the split view of E, all in a nice package, available on Windows, OSX and Linus. Meaning you will never have to fear coding on any platform. A part maybe from your web server.

Obviously I am excited, I moved my tm bundles and started playing around with it but it is too soon to tell if the relation will last. If you want some tips and tricks on using Sublime 2 I recommend having a look at this article on nettuts.

This is why I started BackboneFU, in my wildest dreams it would become the resource for Backbone. Anyone who wants to write about backbone will be accepted on the website, so if you want to write something, or already wrote something on your blog and donate the article also on BakcbonFU, you are welcome to do so. There is a nice bio for authors on each articles.

I also added one article recently, Front-end developers to backbone.js.

So there you have it, BackboneFU lives

Confoo conference

This year I am trying to do a talk at the Confoo conference, basically it’s an introduction course at code organization with jQuery, called jQuery Spaghetti. It’s probably not for most of you guys and I know it has been done in other js conferences, but I feel like Confoo will have quite a bit of ‘hobby’ jQuery devs since it’s really a diverse conference about all web technologies (hoo and it is also in french). Still, if you like the idea and you’re in Montreal, I could use a vote or 2 for my talk. (You can downvote too, any feedback is appreciate!)

Self-publishing a book

Did you know that anyone can wrote a book and self-publish it these days? and I am not talking about doing a pdf, I’m talking about a paperback book available from amazon. This is what lulu.com and createspace.com are offering. It does all the hard work for you (well beside writing the book of course).

It’s quite impressive to upload a pdf and have a paperback available from online stores, and even physical book stores with lulu.

A book on css, really?

Yup, I am writing a book about html and css templating, this has been done 30 times you might say, but I really think the approach I am taking has not been that used. In this book I am not talking about HTML5, CSS3, grids, etc. I am talking about doing templating efficiently on deadlines with a cross-browsers angle.

The book will walk you through 2 examples (a website homepage and an email), and explain you the problems you will encounter along the way. I’m already 80% done with the writing, but doing image assets takes quite a bit of times.

A book looking professional

Obviously if you are authoring a book, you want it to look professional. Unfortunatly most of us are not designers. Fortunately there is a couple of inDesign book template available, I even found one free, and its a really nice book template.

I am going to spare you the details of my adventure with them, you can find all the details here. Let’s just say that I bought some furniture and I am really not happy with it.

War, guerrilla style!

I was so pissed off about my discussion with their customer support that I decided to create a website to tell everyone about how shitty The Brick is, and I did it in little more than 4 hours. First thing first, I bought a nice domain name, thebrickwarranty.com. My host, webfaction, has some pre-install softwares, turns out wordpress is one of them. Not that it’s hard to install of course, but it is quite satisfying to have it up in running in 10 seconds.

Ok, but what about the design?

My friend Google told me that there is quite a few nice free themes around, and I found a spectacular one too. I just did a couple of small template tweaking to fit my needs.

I also needed a couple of plugins,

Disqus – The super nice commenting system that handles everything.
Share on facebook – Well a sharing plugin
wp super cache – Hey, using less resources is always good

The longest thing was finding the Facebook sharing plugin! Of course I needed a Twitter account too, I decided to use the nice concept of BP global PR, which was making fun of BP disaster PR campaign, I registered @thebrickwarranty. I was very disappointed, but not surprised, to find out that The Brick does not even own a Twitter account. HEH!

This was the final result, the brick warranty

Now that’s all nice, but I needed people to find me and I needed to get on the first page with the “The Brick” keyword. Turns out there also quite a few people pissed at them, so I tried to advertise thebrickwarranty.com on different consumer forums, with mitigate results.

Google Adword

I had this 100$ Google ad voucher code taking dust for a while, what a nice way to try Adword! Turns out, The Brick is an expensive keyword and it didn’t last long.

One nice thing however, with Google Analytic I saw that some people find the website on keywords like “the brick dining set”, which is pretty cool, over time I am pretty sure my ranking on this type of keywords will become better.

Reflecting on all this

In the end I surely invested more time than it was worth the trouble. I contacted their customer support linking my new website in hope it might at least get a “*(&(u*” from a director or a vice-president, I did not got a response yet. I’m still happy I did it, mission accomplished.

Making a framework choice

Where do I start? like anyone I guess, I check for the best framework to learn. Obviously I am not going to create my own MVC framework, some of the best php guys are already doing that (And also I suck at doing php). And I am not going to use a CMS, not enough barebone to do an app, less extensible and also more security problems (plus I hate Joomla and Drupal). So I browse the web, django, ruby on rail, Zend, Symfony, so much languages and frameworks, so much choice!

In the end I decided to stay with php, I already know php a bit and learning an entire language felt like a waste of time, I ni mi ni ma nimo, I stop on Kohana and Symfony.

Kohana feels like jQuery I would say, I can do some basic stuff quite easily.
Symfony, feel a bit like Dojo, it’s effing huge, and not as easy as Kohana.

That being said, Symfony had a lot of features I wanted, a bigger community and a better documentation, so in the end, Symfony won my challenge. Diving right into it, I start the Symfony in 24 days book. Okay, so yeah, setting up environments check, learning a bit of the ORM check, learning a bit of the command system check, Okay my head hurts now.

Don’t even get me started with the Symfony form framework, I really hate how they automatically generate your forms. That being said, it still is really useful, the idea is to generate a form linked to your database table, so this make it really easy to save new entries.

In fact it look like this: $form->save(); .. yeah that easy. Like I said I am not a fan of how they automatically generate the form with table though, but you can mold it as you want, and generate each label and input separately.

My head is being pounded

You really can’t be efficient when you’re learning, getting stuck each day at doing something that should be easy.

Who knew doing back-end was so hard! You got to manage Cron, sql, orm, MVC frameworks, routing… I feel like I should have started learning this a long time ago. When I was in school has a Multimedia Integrator I learned ASP (not .net), a pure waste of time. Now they learn PHP but I’m not even sure if they even have any remotely idea of what MVC mean, which is bad, as most of everything they do will be in front-end developer will be in a similar environnement.

The documentation

Probably the best thing about Symfony is it’s documentation. You get a crazy amount of information from the get-go. With one of the free book, you can create a job posting website in 24 days. I used a lot of information from this book to create my application.

It really give you a good feel on how the anatomy of any application should be like using Symfony.

Symfony as a framework of choice for front-end developers?

I found in Symfony what I guess most people found in Ruby on rails from what I read on the web. The framework really give you the tools you need to create web application, so you can really concentrate on your app instead of focusing on integrating swift mailer, managing your database relations and others. It really gives you a big abstracted layer of everything you will need to create your next thing.

But I also saw a lot of front-end developers on twitter doing ruby and django, I guess it is a matter of taste after all…

I will be updating the documentation today, but the most up to date doc will always be the readme on github. The legacy 1.7 documentation and download can be found under package when you hit download on github

Time to stop squeezing ketchup (inside joke) and hail to the beast.

The rewrite was done by Olivier Refalo, I wanted to do a rewrite for some times but a lack of time and passion about this stopped me. The script was near 3 years old and while I was happy with it, to stay in a “modern” javascript world it needed significant changes.

The core of the library stayed the same, but what is wrapping is a lot better, Olivier also did a nice rewrite of the ajax validation function. I am really happy on how it turned out.

The merge should be done by the end of the week, I will also link to a legacy api and I will add the api page to the 1.7.3 bundle, so don’t worry about loosing the old documentation.