Developing with Sencha Touch

A few months ago I started getting into web development to get my skills up to scratch because I believe that the web will be the future. To be more specific I think that HTML5/CSS3 allows a similar experience across different platforms whether that be Mac, Linux or Windows, desktop or mobile. I want to keep my skills up for the future.

What is Sencha?
Sencha Touch is a user interface JavaScript framework used to develop for mobile devices. Sencha Touch aims to enable developers to quickly and easily create HTML5 based mobile apps that work on Android, iOS and Blackberry devices, and produce a native-app-like experience inside a browser.

Why did I use Sencha?
There are many other frameworks out there, why Sencha? To be honest I am a fan of knockout.js and Kendo UI because it adopts the MVVM framework that I am used to with WPF desktop development. I used Sencha Touch because of the HTML5 is Ready contest.

Design Process
My idea was to create a weather app (yes another weather app). Everything started out as sketches. I wanted to include a background image of each city in the background and use a carousel to slide between each city.

photo (4)

If there was reason to send these sketches around to other people I would use something like Balsamiq. For the purpose of this app and showing the idea to friends I used POP (Protyping on Paper). This is a great app to link different sketches together.

photo

Coding Experience
Sencha Touch is a framework and it is big (46 MB). Unlike other JavaScript frameworks that only require a single file this may seem like overkill. So why is it so big? Sencha Touch requires you to build the files. It uses Compass/SASS to build the styles.  It optimizes the JavaScript files you will use by the ones you reference in your application.

It was hard building the UI with JavaScript because as a begineer I didn’t know whether to put the components or how to structure it. The Sencha Architect tool (another application to download) really made this process much easier to create different user interface layouts.

SenchaArchitect-Editor

Final Product
Given that I started looking into coding in January and the contest was up in February; 3 weeks. The first 2 weeks was spent trying to figure out Sencha Touch/Sencha Command/Sencha Architect, the last week was the real coding. Therefore my application was coded in one week.

You can upload your application in zip file to Sencha Cmd. Sencha will host it for you. You can look at the application I created by clicking on this link here for Weather View.

The final application has the carousel control to move between cities. For each city, the tab control shows the weather for Now, Later and in the Future. For the Later part I wanted to create something like the BBC weather graph but due to the time constraints I settled with the normal graph. Below are images of the application.

photo (1)

For cities where the time is in the night time (6pm-6am) I tried to use a night background image.
Toronto

Given more time I would have improved the application by having cleaner weather icons and better user interface. Congratulations to one of the winner Weathy. On the week the contest ended Haze also released. Weather apps they can be beautiful in addition to being useful.

Advertisements

4 thoughts on “Developing with Sencha Touch

  1. From all my research i found your article very interesting relate with my problem. I am Graphic Designer and i want to learn SENCHA ARCHITECT. I do not have any background experience with coding and i am facing a problem with that issue. Is there any way to help me from were to start;
    I found sencha architect very powerful too and that’s way i want to learn it…. I hope you have something for me 🙂 Thanks

    • Thanks for reading my post. I think the best way to learn something is trial by fire. Try to build something that you wish existed or try to emulate an app you like.

  2. Pingback: Portfolio | Designing Logic

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s