Hey, I'm writing a book too :) Click the link below to preorder and save ;)
»» Get the Only Reference You'll "ever" Need on JavaScript Engineering Interviews, Now! ««
May 8th in Discussion by .

Some Good News and What’s Upcoming…

For those who haven’t heard: I’ve changed jobs.
And it was a truly fast transitional week, leaving LiveGO and joining the grou.ps family.

My work hours at grou.ps are a little “shifted” to compansate the 10-hour lag between the grou.ps HQ at Palo Alto, and the Istanbul Development Office. This will, in turn, mean that there will be less time for me to blog :( . However, I’ll do my best, to put as much value as I can :) . And I’m sure, we’ll be building great things here.

Don’t trust my words? Stay tuned, and see the proof for yoursef ;) :

In the following few tutorials, our aim will be to create a really simple mobile chat application. I’ve already developed it and it’s uploaded in the o2.js SVN repository (user: o2js, pass: o2js).

Here’s what our final application will look like:

o2.js android chat demo

o2.js android chat demo


It’s a real, working, native (hybrid) android application. And it’s equally easy to build a similar app in other platforms like iPhone and iPad. We will learn how to do so ;)

To create such an application we’ll need:

  • A DomHelper object,
  • A cross-browser Event Handler,
  • A JSONP Wrapper,
  • A simple Comet Service,
  • Some other server-side service endpoints,
  • And a rock-solid mobile framework to build cross-platform hybrid applications.

Then it will be fairly easy to create the application.

Our final application will NOT be production-ready, but, at least, we’ll have ideas on how to improve it to make it ready for production. And who knows, we may have a tiny little o2.js mini chat app in the future, on your mobile appstore of choice ;)

We’ll see how it goes.

Feel free to share your ideas, suggestions and queries in the comments :)

It's me: Volkan! Jack of all Trades, Samurai of JavaScript ;) Since 2003, I’ve been doing front-end development on client-heavy AJAX web applications. Currently, I'm a JavaScript Hacker at "SocialWire". Before that I was a VP of Technology at "GROU.PS", a well-known do-it-yourself social networking platform that allows people to come together and form interactive communities around a shared interest or affiliation. Before that, I was a JavaScript Engineer at "LiveGO", a globally known social mash-up. Before that, I was the CTO of a business network ("cember.net") which was acquired by Xing AG for around 4.2M Euros. See my linkedin profile to find more about me; I also share worth-following bits an pieces on twitter.

VIsit Volkan Özçelik's website

4 Comments

  • Reply Halil . May 8, 2011 .

    It may be a bit early and broad, but I’d like to ask it anyway :) What are your thoughts on multi-platform mobile frameworks like PhoneGap (e.g. how far they can go without native code)?

  • Reply Volkan Özçelik . May 8, 2011 .

    Hi Halil,
    Thank you for your nice, and really broad question :)
    I’ll try to give an as much narrow answer as I can.

    Actualy the current state and the future of hybrid apps are pretty promising.

    HTML5 CSS3 combo is good enough for iPhone 3Gs+,
    It’s getting there for most android 2.2+ devices,
    And it’s a little behind, but improving for RIM.

    In short, the devices are getting more capable in terms of CPU speed, memory, and JS engine performance.

    Despite that, mobile devices have very limited processing power compared to modern desktops. It’s essential to keep performance optimization in mind when developing touch applications, considering the fact that we are developing non-native apps.

    I plan to mention such techniques as keeping your DOM slim, managing troublesome CSS3 properties, and other ways to keep your app sleek and responsive, in the future posts.

    Until then, here are a few things to keep in mind:

    - Destroy components that are not visible anymore. (memory is expensive and re-rendering them is more efficient)
    - Minimize DOM size and DOM depth (it’s not a problem for “some” of the desktop browsers that use graphics aceleration, but DOM depth is a pain in the ass for mobile browsers (especially for android) and mobile browsers don’t have GPU acceleration, and all the burden is up on the CPU.
    - Use event delegation whenever possible.
    - Use limited amount of advanced css3:
    - No opacity & rgba
    - No border-radius
    - No text-shadows & box shadows
    - Avoid extensive animations (animations are like drawing on steroids) don’t animate or slide a card with many shadows, gradients and other heavy css-3 effects.

    In short, if you know what you are doing, then the application you develop will walk like native and talk like native; nobody will suspect that it’s an hybrid app. It just needs some additional care — a little more than its desktop counterparts ;)

    Hope that helps :)

    • Reply Halil . May 9, 2011 .

      Thank you very much for taking time to write such a long and useful reply. And it’s good to know that more is coming on this :)

      • Reply Volkan Özçelik . May 9, 2011 .

        My pleasure :)
        It’s a great pleasure to add value to the community.

Leave a Reply





o2.js _
Fork Ribbon