Muffin Series 3: Muffin's Features
Muffin is designed to help the web developer build the new generation of highly interactive, real-time, client-side webapps. It makes use of many amazing open-source tools from the community — Backbone.js, Underscore.js, CoffeeScript, jQuery, Twitter Bootstrap, Node.js, Socket.IO, and more. By integrating these tools into a well-tuned, full-stack development workflow, Muffin makes developing client-side webapps a breeze.
Unlike some other tools, Muffin doesn’t aim to work well with a large variety of technology stacks, but instead concentrates on optimizing a few preferred ones. The preferred frontend stack uses Backbone.js and CoffeeScript, and two preferred backend stacks include Google App Engine and Node.js/MongoDB. Muffin could be adapted to work with other stacks but might not offer the best development experience in those cases.
Optimized For Developers’ Productivity
Muffin is designed for real developers working on real-world projects, so it cares about your productivity as much as you do. To this end, Muffin is obsessive about writing modular code, keeping the code DRY, using sensible conventions, and removing as much friction from the development process as possible. Muffin borrows many great ideas from Rails, Django and WordPress to achieve an insanely fast web development process.
Convention over configuration
Rails has proved that sensible conventions can save developers valuable time and greatly simplify the development process. When creating a new project, Muffin sets up a well-planned project structure for you, so you can start coding right away. Also, Muffin automatically infers module dependencies from module content or package dependencies, reducing manual configuration to the minimum.
Use modern languages
Write modular code
A frictionless build process
The build process is what the developer lives and breathes every day, so it’s crucial to remove as much friction from the process as possible. For development, Muffin provides language compilation, automatic module wrapping, file watching, live reload, debugging, etc. For production, Muffin offers module dependency tracing, file concatenation, compression, cache busting, etc. Above all, Muffin takes advantage of the synergy among the build process, module loader and package management to significantly reduce complexity in the overall system.
Rails generators are so useful — with one command you can create a fully functional CRUD prototype ready for tweaking. In comparison, generators included in most client-side tools are not as useful because they only generate code for the frontend. Muffin provides Rails-style generators for the full stack — with one command it can generate client models and views, as well as server models and API endpoints.
Explicit over implicit
Muffin provides sensible conventions and best practices for your Backbone app, but it doesn’t hide code from you. All your application code resides in your project files, so you always know what your code is doing.
Frontend: Backbone.js + CoffeeScript
Muffin’s preferred frontend stack uses Backbone.js and CoffeeScript. Backbone is an incredible library that provides just the barebones of a MVC framework. In my opinion, Backbone’s minimalistic design is its greatest strength and also the primary reason for its popularity. However, the unopinionated nature of Backbone also means that you have to figure out a lot of things by yourself, including the project structure, module loading, view layout, etc.
Muffin takes a different approach. It provides a sound project structure, sensible conventions, and best practices extracted from real-world projects. The lower-level issues, such as module support and dependency management, are dealt with by the build tool. This approach significantly reduces the complexity of the overall system and requires little boilerplate code.
Backends: Google App Engine or Node.js/MongoDB
Muffin has two preferred backend stacks: Google App Engine and Node.js/MongoDB. You can certainly choose other server stacks and use Muffin only for the frontend development — a key advantage of client-side webapps is that the frontend and backend are completely decoupled — but you might miss out some great benefits of using Muffin as a full stack development tool.
One of these benefits is the minimum setup. Getting something up and running quickly is the key to any agile development. When you use Muffin for the full stack, you can create a project and see the app running in the browser right away. There is no lengthy process of setting up the server development tools, the web server, the application server, and many other miscellaneous steps.
Another benefit is the full stack generators. When you use Muffin for the full stack, you can use Muffin generators to create client models and views, server models and API endpoints, and all the glue code, all at once. So you have a fully functional CRUD prototype right away, ready for tweaking. You don’t have to wait for the server team to implement server APIs just to test out a small feature.
Finally, Muffin’s preferred server stacks have a lot of merits of their own, such as decent performance and high scalability. Muffin also provides sensible conventions and best practices to help you use these stacks more effectively.
Since Muffin is for real developers working on real-world projects, it’s designed with scalability in mind from the start.
Client-side webapps have some inherent advantages when it comes to scaling, compared to server-side webapps. The entire client app can be concatenated and compressed into a few static files, which can then be delivered on CDN. This setup offloads a substantial amount of traffic from the application server while making the app load faster. Moving view rendering to the client side also takes a huge load off the server. Instead of sending HTML pages or snippets, the server only needs to send small JSON data to the client, which significantly reduces the server load as well as the bandwidth usage.
Both of Muffin’s preferred backend stacks are known for their scalability. Google App Engine is optimized for applications with short-lived requests, which is a perfect fit for client-side webapps. Node.js’s non-blocking event model is also ideal for handling a large number of small JSON requests.
Muffin is also well-suited for creating mobile webapps. Rendering the app UI entirely on the client side eliminates the need for page refreshes, thus giving the mobile webapp a native feeling. Sending JSON data over the wire reduces bandwidth usage and network latency, both very important for mobile devices.
Muffin also makes it easy to bundle a client-side webapp into an offline webapp. An offline webapp stores all the required files in the HTML5 application cache so that it can work without an Internet connection. Pair this with data caching, you have got yourself a way to create first-class mobile webapps that can compete with native apps in every condition.
Muffin is DRY
Muffin practices what it preaches — it is DRY, self-contained, written in succinct yet readable CoffeeScript. Muffin’s core consists of only a few small files, about 1200 lines of code altogether. This is in stark contrast to many other tools which have tens of thousands of lines of code.