LEARNING TRACK Mobile Developer
This learning track is designed for programmers who want to develop applications
with jQuery Mobile. It usually takes 3 days for fast developers, 10 days in average
and up to 3 weeks for the very beginners. The learning track teaches:
- How to use JavaScript
- How to use jQuery
- How to use jQuery Mobile
- How to write quality code
- How to develop simple application with jQuery Mobile
Learning to use JavaScript
Both jQuery Mobile and jQuery are based on JavaScript, so in order to work
with both frameworks you need to know how to use JavaScript. Read the following
books:
JavaScript - The Good Parts and
JavaScript Patterns to make yourself familiar with JavaScript.
A good online source for JavaScript is Mozilla. Their Learning JavaScript
section provides a lot of additional knowledge and is a good starting point for
questions you might have.
How to use jQuery
jQuery is a library written on top of JavaScript that makes working with JavaScript
easier and irons out a lot of cross-browser issues.
Please go to Learning jQuery and read through
all of the chapters. After that, have a look at the jQuery API
and make yourself familiar with all of the methods jQuery exposes.
When working with jQuery you will often have to integrate 3rd party plugins or libraries.
Have a look at jQuery plugins, a public repository
of available jQuery plugins. Select a few examples and see how they are written and can be
integrated into an existing application.
Learn jQuery Mobile
jQuery Mobile is a library based on top of jQuery which focusses on responsive web design.
Please go to the jQuery Mobile API and work through
the sections in the left hand menu (Events, Methods, Miscellaneous, Properties, References, Widgets).
Pay special attention to the jQuery Mobile event system as well as the widget section.
All jQuery Mobile widgets are written using the jQueryUI widget factory - an abstraction framework
for writing jQuery plugins. Make yourself familiar with the
jQueryUI widget factory API, so you are able to write your own widgets or modify existing plugins.
Learn how to write quality code
In order to write reusable code, you should make yourself familiar with the following tools:
- Nexedi JavaScript Coding Conventions
The coding conventions being used at Nexedi when writing JavaScript
- JSLINT
A code quality tool for writing JavaScript. You should run this in every build process on the code you
are writing
- W3 HTML Code Validator
You will have to write or generate HTML5 code along with your JavaScript. If you have no
experience with HTML or the latest specification (HTML5) go to the HTML5 rocks
page and make yourself familiar with all features available.
- CSS Lint
The code you are writing will often have to be styled using CSS or it's latest specification (CSS3). Use this tool
to ensure good quality code. If you have no prior experience with CSS3, Mozilla
provides a good overview with all relevant properties, browser exceptions and vendor prefixes. You should be
familiar with all.
Develop a simple task manager application
Now that you are familiar with all of the technologies you should do develop a simple task manager application using jQuery Mobile
and JIO. Follow these steps:
- The application should store (hardcoded) tasks in a jIO localStorage
- Tasks should include the following fields: id, title, description, status, start date, end date, project
- The application should store (hardcoded) default status and project names in a jIO localStorage
- On the initial page, all tasks should be displayed in a jQuery Mobile listview
- The list items allow to quick-delete a task
- Clicking a task opens the detail page where all task fields are displayed in a form
- On the detail page, tasks can be edited, deleted and saved
- Add a jQuery Mobile header and footer to every page
- The footer should allow to switch between tasks, projects and settings
- Projects are groups of tasks
- Add a project page displaying projects as jQuery Mobile collapsibles inside a jQuery Mobile collapsible set
- Each project collapsible should display it's tasks in a jQuery Mobile listview
- The listview should have the same functionalities as on the starting page
- Add a settings page, which lists the default status and projects.
- Allow the user to add custom status and projects including editing and deleting
- Default status and project names loaded on application initialization are read-only
- In the header add a button to open a jQuery Mobile popup for sorting tasks
- Provide functionalities to sort tasks according to one or multiple criteria (and ascending/descending) using jQuery Mobile checkboxradios and selectmenus
- Add a compatible plugin for a datepicker to provide an easy to use entry (and default format) for dates
- Add a compatible plugin for form field validation and validate all forms before submitting
- Add a compatible plugin for translations. On the settings page, provide the option to switch between languages (without refreshing the application!)
The walkthrough of how to create the task manager can be found here.