How to install and build a custom Zepto library

If you’re searching for a light-weight JavaScript library similar to jQuery to use in your development for mobile hybrid app (i.e. with PhoneGap) then Zepto is your choice! This library it’s really compact, open source (MIT license), weights just 9.2kB and if you already know jQuery (who doesn’t?) Zepto APIs match jQuery ones…

Zepto’s default package contains these modules: zepto, event, ajax, form and ie (check Zepto site for explanations and full list of modules!).

A very cool thing about Zepto is that you can create your own package with only needed modules! To build a custom Zepto library you should have Node.js installed on your system and follow these steps (for linux and OSX):

  • download Zepto source code from Github (i.e. in zip archive)
  • unzip it and open a terminal in that directory (i.e. you should be inside something like ‘/tmp/zepto-master/’)
  • execute following command:
    • npm install
    • npm run-script dist
    • MODULES=”zepto event data” npm run-script dist

…where “zepto event data” is a space-separated list of wanted modules! After this you should find your Zepto custom library (uncompressed, minified and gzipped) inside ‘dist’ directory (i.e. ‘/tmp/zepto-master/dist/’)…

Please note that inside your custom library you can find in the first line a comment with your choosen modules.

Mobile app development with PhoneGap

PhoneGap by Adobe lets you use HTML5 + CSS3 + JS to build apps once and distribute them over multiple platforms (Apple/iOS, Android, Blackberry, WebOS, Windows, Symbian, Bada). Phonegap supports following features in all major platforms:

  • accelerometer
  • camera
  • geolocation
  • network
  • contacts
  • notification
  • storage
  • media
  • file
  • compass (only on recent ones)

(take a look on their page for a full supported features table)

There are also a bunch of tools and plugins that may come in handy.

Integration with third party (facebook, twitter, outlook, calendars, paypal and so on) can be tricky but necessary to interface services that you need to integrate into your app.

Actual version is 3.3.0: its reference documentation is here while support sections helps you in basic operations.

With PhoneGap you’ll be developing html + css + js webapp using libraries like jQuery and jQuery Mobile or Intel’s AppFramework.

As backend you can use any language/framework to feed your application with fresh data. An example is Yii with a plugin (jAPI) that “convert APIs to JSON”.

PhoneGap seems to be ok for simple and line-straight applications. For more complex application it kinda gets in the way. You can overcome problems writing native code: to use it in your app you must write a PhoneGap plugin. Check out this article too. Couple of hints for iOS and Android.

PhoneGap gives you an handy web service to compile your app for all platforms. This service will ask for you digital certificates and passwords to sign apps… this is not very cool.

PhoneGap give you the “Hydration” option for your app: the binary wrapper will look for new versions of the software on startup letting you to push new builds to your users without going through the standard update mechanism! This is convenient!

You can try out PhoneGap for 1 private app for free: basic plan will cost you 10$/month or 50$/month if you subscribe to Adobe Creative Cloude service.

Useful links

References

In this post I merged things found in other articles: if you want to read all the original posts check these links: