My Experience with React and Ember: A Personal Perspective

Edit: Please note that this piece was written before I joined LinkedIn and started working with Ember.js on a daily basis.

As a software developer, I’ve been fortunate to work with a variety of libraries and frameworks. Today, I’d like to share my personal insights on React and Ember, two widely-used tools for creating web applications. Keep in mind that these opinions are my own and your mileage may vary.

React: A Versatile Library for Cross-Platform Development

React has evolved into much more than just a JavaScript library for app development. It’s a high-level approach for crafting interfaces across various platforms—Desktop, Mobile, Virtual Reality, and Web Apps. Its adaptability shines when using languages other than JavaScript, thanks to bindings for JSX, the popular templating language associated with React.

Ember: A Comprehensive Framework for Rich Web Applications

In contrast, Ember is an all-inclusive framework composed of numerous dependable libraries, ideal for building intricate web applications. It comes with built-in client-side routing, global state management, and powerful extensions to Handlebars, its third-party templating engine. Ember revolves around components and services, delivering a robust routing experience often lacking in React applications. This enables potent lifecycle hooks, dynamic route generation, and effortless management of path and query parameters.

React’s Component-Centric Approach: Flexibility and Challenges

React’s philosophy centers around components, granting developers the autonomy to choose routing, global state management, and project configuration. While this flexibility can be a blessing, it can also be a curse, leading to frustration and inconsistency, particularly when tackling major configuration decisions. React’s abstraction of the DOM and state behaviors might obscure an application’s inner workings, which can be a pro or con depending on the developer’s objectives.

Ember Octane: A Closer Connection to JavaScript

Ember Octane heavily leans on ES6 classes and experimental decorators, yet while working with Ember, I find myself immersed in JavaScript, achieving a greater understanding of my application’s performance and reliability. Grasping an Ember app’s core concepts doesn’t require extensive expertise, and Chrome Dev Tools makes debugging the logic and state a breeze.

Example: Increment Counter in Ember Octane and React

Ember Octane:

// app/components/counter.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class CounterComponent extends Component {
  @tracked count = 0;

  @action
  increment() {
    this.count += 1;
  }
}

{{!-- app/components/counter.hbs --}}
<p>Count: {{this.count}}</p>
<button type="button" {{on "click" this.increment}}>Increment</button>

React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button type="button" onClick={increment}>Increment</button>
    </div>
  );
}

Final Thoughts

React excels when it comes to creating quick single-page apps, enhancing existing React codebases, or developing multiplatform applications. However, when starting a new project, developers may find it overwhelming to set up a robust infrastructure without the help of meta-frameworks like Next.js or Remix, which streamline the process.

Despite its versatility, React sometimes lacks the centralized structure and tooling necessary for effectively scaling web applications.

On the other hand, Ember’s approach has much to offer. While it may not be the most user-friendly or top-of-mind framework, its opinionated architecture, comprehensive feature set, stability, and ease of debugging make it an enticing option for developing web applications.