Yaogang Lian

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.

  1. 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.

  2. Use modern languages

    HTML, CSS, and JavaScript are the building blocks of the Web, however, they are all quite verbose and error-prone. In recent years better languages have been designed to address these shortcomings —- CoffeeScript is much more succinct and readable than JavaScript, Jade is cleaner and easier to write than HTML, and LESS extends CSS’s functionalities. However, all these new languages need to be compiled into their old counterparts, which hinders their adoption. Muffin makes it easier to use these modern languages by providing built-in compilation support.

  3. Write modular code

    A severe shortcoming of JavaScript is its lack of module support. This makes writing large-scale JavaScript applications unnecessarily hard. With Muffin you can write clean, modular code in the CommonJS format. Muffin then wraps these modules into an AMD-compatible format so they can be asynchronously loaded in the browser.

  4. 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.

  5. Rails-style generators

    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.

  6. 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.

One way to tackle this issue is to build a full-featured web framework on top of Backbone, but I don’t like this approach. First, many of these issues are rooted in much lower levels than MVC, for example, the lack of module support is a flaw in JavaScript’s design, so it should be dealt with at the language level. Second, if you follow some sensible conventions, Backbone doesn’t really need much boilerplate code, so adding extra layers on top of Backbone provides little value but adds more complexity.

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.

Scalable

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.

Mobile Friendly

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.

Yaogang Lian

An iOS, Mac and web developer. Focusing on building productivity and educational apps.