Ember as a Frontend Framework
Choosing a frontend tech stack is hard. With new libraries and frameworks popping up seemingly every day, and just as many fading into obscurity, the landscape of web development is a volatile one. An environment like this makes it enormously important for the stakeholders of a new project to carefully examine and weigh the available solutions against each other. Concerns like stability, long-term support, and maintenance are often at odds with the developers’ desires to be on the most modern and bleeding edge of technologies. There are a handful of libraries that inevitably enter this conversation, but Ember.js is one of the few frontend solutions that does a fantastic job at satisfying the needs and wants on all sides.
Why Ember?
Ember is a JavaScript framework that is architected to give you pretty much everything you need to build even the largest web applications. As its own tagline bills it, Ember is “a framework for ambitious web developers” and provides you with a complete toolbox to build modern single-page web applications. It is even used in mobile and desktop applications, via popular platforms like Apache Cordova and Electron. Initially released in 2011, and the offshoot of SproutCore (a framework largely developed by Apple), Ember has now been around in some form for over a decade – an eternity for frontend web technologies.
Out of all the most popular JavaScript libraries and packages available, Ember is one of the few that can be considered a true “framework.” In recent times, terms like “framework” and “monolithic” tend to scare some frontend developers away, usually because of their perceived heaviness when compared to other more lightweight libraries. And while it’s true that Ember is, byte for byte, one of the bigger packages out there compared to its competitors, it’s almost an apples to oranges comparison. Once you finally add all the other ancillary packages and dependencies you need to build a comparable application in, for example, React or Vue.js, that final payload size will often meet or exceed Ember’s. And on top of that, you are now responsible for managing a big, interconnected web of dependencies, having to ensure everything is compatible and plays nicely with everything else. By contrast, Ember is “batteries included,” with so many features and functionality that is expected of a modern web app, out-of-the-box.
A “Batteries Included” Framework
One of the more important features baked into Ember includes a modern and extremely performant component-centric view layer, which is itself actually a standalone library called Glimmer.js. While it was built with Ember in mind, it is usable on its own (such as for very small apps or embedded widgets). All Glimmer components are 100% compatible with Ember and can be dropped into any Ember app. Glimmer components use a superset of the Handlebars syntax to define their templates and are very declarative and lightweight. It is no slouch when it comes to rendering performance either. Glimmer is among the industry leaders in this category, providing excellent speed and responsiveness, even on lower-end phones and devices, often with little to no developer tuning.
A best-in-class, fully fledged routing system, for mapping browser URLs to pages and app state, is another central pillar of the framework. Early on, Ember’s core team recognized that one of the web’s greatest strengths as an application platform is the URL, and how critical it is for enabling the shareability and discoverability that users expect. With this in mind, Ember was designed from the ground up around its router, giving first-class support for mapping URLs to application state, including deep integration and APIs for things like query params, all while making it extremely declarative and dead simple to use within the application logic.
Almost all web applications of even modest size need some way of managing data and global state, as well as a means to persist that data to a database, server, or some other kind of backend technology. Ember has this covered too, through its included sister library, Ember Data. Reminiscent of ORMs, Ember Data allows you to define models and the relationships between them, which it then uses, along with customizable serializers and adapters, to generate network requests to your backend API. Implementing your data layer through Ember Data unlocks many benefits which are often complicated and hard to do, such as local caching, or management of data requests and state rehydration from server-side rendering environments.
On top of this, Ember Data ships with support for an industry-wide specification for the design and structure of JSON-based APIs, called JSON:API. While it has plenty of “escape values” to tweak it to fit whatever external services you need to work with, integrating with a JSON:API-compatible backend results in an extremely smooth development experience, requiring almost no boilerplate code to start interacting with the API. The JSON:API spec itself also opens the potential for a lot of other benefits, such as preventing over-fetching of data, flattening and normalizing heavily nested relationships, standardized pagination, and more.
Through its add-on system, even more oft sought-after functionality is easily enabled. Ember FastBoot allows server-side rendering of Ember apps, which can be critical in many projects for SEO and ultra-fast page render speeds. Ember Engines unlocks the ability to break up an app into logical parts to allow for things like code-splitting and on-demand code downloads, and also making it easier to organize extremely large applications. Ember’s add-on ecosystem itself is a great strength, due to Ember’s own tools making it very easy to create add-ons, as well as the ability to discover high quality third party add-ons through tools like Ember Observer.
Equally important, though perhaps not as exciting and flashy, Ember also has a comprehensive integrated testing platform built on top of QUnit. Not only are the running and validation of unit tests built into the core development cycle, but creating the actual boilerplate of the tests themselves is automatic via the Ember CLI, which is really the foundation of Ember’s excellent developer experience.
Developer Happiness
The Ember CLI is a command line tool which provides a myriad of functions, from creating, building and running Ember apps and add-ons, to executing unit tests, to generating boilerplate code for common modules and patterns using “blueprints.” The Ember CLI is so crucial to the impressive speed and ease of the Ember development flow that the software has even been directly forked and integrated by its competitors, like AngularJS. The developer ergonomics of having the ability to easily spin up new Ember apps in minutes or build and test them with a single command is invaluable, especially when onboarding new team members, or handing off projects to other teams or outside parties.
Functionality like Ember CLI’s “blueprints” only really work because of Ember’s adherence to the “convention over configuration” development philosophy. Following in the footsteps of other frameworks like Ruby on Rails, Ember has a set of rules on how it expects an application to be structured and organized, down to even the location and naming of files and modules. Following this set of conventions allows Ember apps to be predictable and consistent, which often greatly reduces the amount of boilerplate logic and code that other libraries require to wire everything together. Additionally, this results in apps that all structurally look more or less the same, even across different teams or companies. This is a huge win for productivity, as moving developer resources around and onboarding new developers on projects can result in a much shorter ramp up time.
Ember’s dedication to stability and support is another core tenet that sets Ember apart. Its releases are governed by Semantic Versioning, or SemVer, which is a specification which dictates a set of rules and requirements for how and when version numbers must change as new releases are published. SemVer ensures that developers are not caught off guard by backwards-incompatible changes when updating Ember, as it can only do this in major version numbered releases, while intermediary minor releases can only deprecate public APIs and functionality. Ember also publishes LTS (long-term support) releases at regular intervals, which gives projects that are locked on older versions the security of knowing that critical fixes will be available for an extended period past its initial release.
Who Uses Ember?
Over the years, Ember has enjoyed continual support from many high-profile companies and across many different types of products and industries. Not only did Ember get its beginnings from software open-sourced by Apple, the tech giant continues to use the framework to this day – a notable example being the “Apple Music” iTunes app. Another big proponent of Ember, LinkedIn implemented its main web application with it, and has even hired some Ember core team members. LinkedIn regularly gives back to the open-source project by sponsoring and allotting time for its developers to work on new initiatives and features. Other notable Ember users include Microsoft, Netflix, and Square, among many others.
Drawbacks
While Ember is a fantastic solution for a wide range of problems, it is certainly not without its shortcomings, and might not be the best fit for some projects. Because of the wide breadth of its APIs and concepts, Ember can often be daunting to new developers, with a higher learning curve that other libraries (especially those that are focused on purely the view-layer only, such as React or Vue.js). However, this has been – and continues to be – a point of improvement, as things like Glimmer components and its recent “Octane edition” release have worked towards streamlining and simplifying the developer-facing concepts, making Ember more and more approachable.
Popularity and community size is another area that Ember falls noticeably short on when compared to the behemoths of React and AngularJS. The enormous mindshare of those libraries is hard to overlook – their vast communities instill a certain confidence that they will be updated often, bug fixes will be prompt, and that they will probably not be going anywhere anytime soon. More developers and projects using a particular framework also usually means it’s generally easier to hire for. Ember by comparison has a considerably smaller slice of the frontend pie, but the community it does have is extremely dedicated and open. It’s often easy to get help and answers, even directly from core team members, through channels such as its official Discord server.
So, Why Ember?
When starting a new project, whether it has a timeline of 2 months or 2 years, has a single developer or a dozen, a strong case could almost always be made for Ember. Its combination of modern JavaScript features and excellent development tools, along with its longevity and commitment to stability and predictable releases make it an attractive option to developers and project stakeholders alike.
In the uncertain and ever-changing terrain of modern frontend development, choosing the right technology will always be a challenging problem, but it’s one that Ember might just make a little easier.