Ember.js and React.js: Comparisons between some of the advanced features

Abdullah Rahman

Ember.js is one of the oldest javascript framework in the town. I was introduced to world of javascript framework by Ember.js . So when I learned new frameworks, I learned other frameworks by comparing with the framework I know. I am hoping this article will help anyone who is transitioning between Ember.js to React.js or React.js to Ember.js.

For starter, I like how React.js listed the advanced feature in the guide ; so I am structuring this article based on the React Documents.

Code Splitting

Code splitting allows application to lazy load some module to your app. Javascript Frameworks builds the js codes in to single bundle of js file. With different build tools(Babel ,Webpack, Broccoli) , all the files are converted to optimized version(performance, compatibility) of js file. However, sometimes big project can become really large ,and it is unwise to build and deliver over network at once.

React and Ember handle code splitting differently. React includes an import syntax; webpack implements the lazyload feature.

Example from React docs,

import(“./math”).then(math => {
console.log(math.add(16, 26));
})

React also gives Lazyloading component using React suspense or lazy.

Ember doesn’t give code splitting out of the box. There is an addon called Ember Engine which allows lazy loading module. However, you can not lazy load component yet , it has to be route specific. Ember lazy load the “engine” when the route is called. Hopefully we are going to get this behavior when Ember.js implements routable components.

*** You can check another ember dynamic update module called ember-auto-import
https://github.com/ef4/ember-auto-import

**Update , chrome added lazy loading feature to browser. You will be able to lazy load asset like image.

<img src=”/cat.jpg” loading=”lazy” />

Context

React Docs describes functionality of context as “Context provides a way to pass data through the component tree without having to pass props down manually at every level.” It allows to pass simple application configuration like theme to every component. This feature is implemented by

const ThemeContext = React.createContext('light');

Then we wrap the component in target by ThemeContext.Provider tag . The child component can get the context by

static contextType = ThemeContext

In the Ember world, I could not find the direct equivalent of context. The closest feature I found was Ember service. So the basic idea of ember feature is dependency inject; you are injecting a singleton(one instance of the object) to the component by doing

authService: service()

This creates a single instance of authService in all the application lifetime. However , this more “active” than React Context. You are basically passing a whole object where you can do more complex operation than just values. The usages should be different too.

Error Boundaries

I would love to have Error boundary in Ember.js. Basically , error boundary is “try and catch” block for the component. Suppose, we are lazily loading a component. Lot of thing can go wrong . So if we don’t wrap the component with error boundary, the whole app will crash. For example

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

Error Boundary is special component with hooks like componentDidCatch , getDerivedStateFromError. This hooks allows the app to gracefully handle the error.

Unfortunately, Ember does not have error boundary (as far I know). This feature would be useful for error like missing elementID, or missing component name.

Fragments

Normally, component has a top level root DOM node when it renders. JSX explicitly requires to have one; Ember automatically adds one. However you can have a use case that component should not have top level DOM node. For example

<ul>
<li>test</li>
<li>test2</li>
<li>test3</li>
</ul>

What if you want to create a component that encapsulate test, test2 list. The component will need a top level node. React.Fragment shines in this situation you can just use

function ListComponent(){
return(
<React.Fragment>
<li>test2</li>
<li> test3 </li>
</React.Fragment>
)
}

This is specially helpful in svg container.

In Ember.js , I didn’t find an official explanation to handle this situation. The closest thing I could find that you can set tagName(tagName is internal prop of component) to be manipulated at the top level DOM node. If you set it equal to empty string , the component become tagless. This is one of the examples why Ember.js gets bad rep. I could not find this explanation anywhere. I had to dig through the RFC chat and find someone talking about it :) .

export default Component.extend({
tagName: ''
})

Apparently this is addressed in Ember octane check this link
https://blog.emberjs.com/2019/03/06/coming-soon-in-ember-octane-part-4.html

Hopefully this article will help a developer to gain some overview of the frameworks. This is my first medium article so please let me know if you have suggestions. You can find more information in this link

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade