The-M-Project is Open Source Software published under the MIT License. This gives you total flexibility for
Build great free and commercial apps with it.
What's new in Version 1.4?
We are currently working on Version 2.0 and write about it in our Blog.
Here you find the latest announcements about the development progress.
Download The-M-Project 1.4.1 and learn how to get started. Happiness is only a few steps away. Learn more...
Join us on GitHub, track bugs, discuss new features or even send pull requests - any help will be appreciated. More on GitHub...
The-M-Project is fully Open Source, MIT licensed and free to use - and it always will be. So you are heavily invited to take part on the development.
Originally created at M-Way Solutions, the framework is now part of Panacoda. Long story short: There is a company behind The-M-Project taking care of its continuance and enhancements.
By using the widely accepted libraries jQuery and jQuery Mobile, The-M-Project is based on some rock-solid technologies.
The established MVC pattern defines the basic architecture of The-M-Project. Its explicit seperation of concerns enables a structured development process. Learn more...
HTML5 & CSS3
The-M-Project ships with lots of game changing HTML5/CSS3 based features like offline support, local storage, positioning, a touch-optimized UI and many more.
A common requirement for todays mobile apps is their global adoption. The result of this is the need for an I18N tool. The-M-Project provides such a tool - lightweight but powerful.
Nowadays companies often won't commit themselves to a certain device. The-M-Project helps with this issue by simply supporting all of them: smartphones, tablets and even desktops.
Espresso allows you to conveniently create app store ready mobile apps (e.g. ipa/apk) by simply running one single command. Learn more...
Espresso - Node based build tool and optimizer
Espresso is a powerful build tool, that eases up the development process in many ways: It initializes the project, creates required components, provides a built-in web server, optimizes and packs the application, deploys it to e.g. an ftp server and builds native iOS/Android apps. Learn more...
- Start the download now: The-M-Project v1.4.1
- Don’t worry about the huge (around 37MB) download size. Most of it is the tool environment with Espresso and the integrated PhoneGap/Cordova libraries.
- The framework code is only 66 kB (minified, not gzipped) with additional jQuery and jQuery Mobile.
- A Unix-like operating system like Ubuntu or Mac OS X or a Windows system with some additional tools installed
- Node.js >= v0.6
2. Download & Installation
- Download The-M-Project & Espresso
- Extract the archive
- Create an alias for Espresso:
- On Windows:
doskey espresso=node C:\Path\To\Espresso\bin\espresso.js $1 $2 $3 $4
- Check your Espresso installation:
espresso version (should print something like Espresso 1.4.1)
3. Set up a new project
- Navigate to the project’s parent directory
- Initialize a new project: espresso init -p MyNewProject
4. Run the app
- Navigate to the project directory: cd path/to/project
- Start the development server: espresso server
- Open the printed URL in your browser: http://127.0.0.1:8000/MyProject
Our KitchenSink app gives you an overview of available components both, for UI and business logic. By providing code samples, it's perfect
addition to the docs.
ToDos is a simple application to manage your ToDos or tasks. It uses HTML5 Local Storage to persist items to have them available without
internet connection and also after the application reloads. Very useful and handy. And, thanks to The-M-Project's great
I18N feature, it's available in 15 (!) languages, from english over chinese to french. Simply choose your language from the settings.
The sample map app basically shows how to use geolocation and maps in a TMP app. Your location is automatically retrieved on startup
if location services are turned on on your device. As an alternative you can retrieve your location by entering an address. Thanks to
reverse geocoding your location is then shown on the map. Try it out!
The Twitter app shows how to interact with an API/remote service via AJAX communication. It uses Twitter's Search API to
get Tweets for a certain user-defined topic.
Many apps use a dashboard to display a menu to the user. This apps shows the use of TMP's UI component DashboardView. Note: the items
can be ordered. All you have to do is tap-hold an icon and then drag it to the position you like once it starts shaking. To exist dragging mode,
simply tap-hold an item again. Pretty simple and all HTML5 technology. iOS users: sounds familiar, right?
The carousel app shows the use of the Carousel UI component of TMP. See through great photos by simply swiping left and right... cool, ey?
Color wheel does what the name suggests: it displays a color wheel. But this one's rendered on HTML5 canvas and comes in pair with a
cube whose sides' colors can be changed. Click on a side and then select your color. Drag the cube to rotate it.
Note: Only works on iOS because Android still sucks in CSS3 transformations.
Memory is a TMP implementation of a memory game. Play it by tapping on the cards. Uses CSS3 for FX. And beware: time's running!
Our charting sample app renders data as a pie chart. Behind the scenes the app shows how to include external libraries (here: Raphaël
your TMP app.
This showcase app shows how to build an application with two separate views that can be scrolled separately. This kind of UI design came to fashion
with the iPad.
Note: This is best seen on a tablet! Doesn't make much sense on smartphones.
Movable Label Sample
This sample application shows how to work with the so called MovableLabel. This component of the framework, we introduced with v1.4, allows you to place text in spots that actually are too small for the length of the text. The Movable Label will then automatically and endlessly "move" the text from left to right (and back again) inside the given bounds.