Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.

From Ember.js to React

Written on August 30, 2017

I love Ember.js! There, I’ve said it. I really do love working with Ember.js. I’ve been using it to build SPAs for about 3 years now and have not regretted the decision.

Recently, I’ve had the opportunity to work on a little side project with a friend of mine. He chose React as the starting point of the project. Since React was already chosen, I decided to give it a go and see what all the React fuss was about.

From my understanding, React is used for only the interface level of an SPA. Meaning unlike Ember.js, it only deals with web components. While Ember.js provides things like routing, templating and web components. I haven’t dived into Glimmer.js but I imagine React would be a more apples-to-apples comparison with that.

The main component to being able to pick up development with React coming from Ember.js was the concept of data down and actions up. If you’ve been an Ember.js developer for some time, you know when working with web components, this is how data and actions are interacted with across components.

React uses similar concepts where data referred to as props are passed down through child components and states which are like Ember actions to manipulate the data from the child to the parent.

Once I understood React’s variant of the data down, actions up, it was just a matter of learning syntax differences and how React did things differently.

Something I learned while picking up React is the reason why Ember.js automatically wraps your components by default in a <div> element. I ran into this issue when I was trying to create a React component with two elements on the root level. React kept complaining about an error, and doing some research, I learned that components can only have a single node.

I’ve often wondered why Ember.js nested all my markup for a component automatically in a div and this definitely shed some light on the issue. I always thought it was silly to wrap table components with a div but thankfully we have the tagName property in Ember.js to manipulate the root node.

I’m enjoying my experience so far with React. It’s unlikely I’ll replace Ember.js with it in my stack choice, but I’ll keep playing with it.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design and side projects. Sign up and I'll send you my articles straight to your email.