In a quest to find a mobile framework in Javascript for building mobile websites, I experimented with a couple of popular open source ones: Zepto and The M-Project. Interestingly enough, they were actually quite different.
1. Zepto
Zepto is a minimalist Javascript library. It is pretty light (~5k to ~10k) and therefore fast! It is a subset of JQuery, so it provides an easy learning curve…
“If you use JQuery, you already know how to use Zepto.”
…although some of its methods’ signatures and feature sets are different. It’s leaner than JQuery because it doesn’t support old desktop browsers; just the modern ones, since it’s targeted for mobile devices.
2. The M-Project
The M-Project is more than just a library. It contains an MVC-based architecture and has a UI based on JQuery Mobile. Its Views are actually wrapped up JQuery Mobile UI components (buttons, lists, images, etc.). It even includes a build system called Espresso and has a way to package your project with PhoneGap, which is a framework that allows you to deploy your mobile website into a native-looking mobile app.
3. Comparison
It is almost like comparing apples and oranges then. A more valid comparison would be something more like:
Zepto + [some MVC framework] + [some UI widgets toolkit]
+ [some build process]
vs.
The M-Project
Screenshots:
Top: Zepto using my custom CSS styling for list. Bottom: M-Project using default styling for list.
Top: Zepto with my custom CSS styling for “Call” button, “Last updated” text, and “Wrong Information” hyperlink. Bottom: M-Project with its default styling for button (“Call”), text (“Last updated”), and hyperlink (“Wrong Information”).
4. My Conclusion
So what is my preference? If I were to build a mobile website, I often think of a few factors:
- Performance. I mean, it is a mobile website, and we can’t expect our mobile devices to have the same processing power as our desktops. I don’t want users to be sitting for minutes waiting for it to load.
- UI Customization. Do I want to be tied down to one look and feel? Surely, changing the colors are just CSS changes, but what about how the lists or the forms or the buttons look?
Based on these factors, I suppose it is obvious that I would skew towards Zepto. Not only is it light, but going back to my comparison in #3, I could mix and match it with a UI widgets toolkit of my choice. I don’t have to be tied down to just JQuery Mobile, but down the road, I could replace it with Twitter Bootstrap. Having the architecture and the UI loosely coupled would be preferable for me, and with its MVC framework and UI components so intertwined, The M-Project does not provide that option.
5. My Conclusion Continues: Filling in the Blanks
Since I’ve chosen Zepto, what about the MVC framework, the UI widgets toolkit, and the build process? For now, I’ll just leave it at Backbone.js for the MVC framework, Twitter Bootstrap for the UI widgets toolkit, and Grunt for the build process. Because with Zepto, you have the option to choose what you like based on your experiences, and what works for you based on your project, and even gives room to experiment or swap stuff out if needed.
For my demos of this mobile research, check out my source code here and here.
melkybee 