You’re a relatively new developer, maybe self-taught. You look forward to conquering the world. Being part of the game-changing which is happening right now makes you feel alive?
As you start developing your first frontend applications, you might focus on ReactJS. Just Google it. Which frontend frameworks should you choose? Then, ReactJS, Angular, and VueJS get the spotlight
It sounds quite evident that one of those three competitors is the go-to framework to let you jump out from the grade of a newbie to a professional. Moreover, you will shine your resume with it in your visual skills list. Let me tell you: EmberJS fits you the most.
Here’s the idea. Imagine you’re on the starting block in the Sébastien_Loeb’s Citroën C4 WRC. World champion of Rallyes 9 times in a row. It’s a 4-inline turbocharged XU7JP4 engine, with a crosswise’s layout and Torque @RPM:419@275. That will be easy to get the 10th cup.
Your turn is coming, and the light has just shown green that you engage the first gear and put your foot down. In a second you’re already down the road.
You realize that only experts understand the impact of the technical specifications on the car. No matter if that’s the car of one of the best driver on earth. Well, that’s similar to any Web engineering project. Indeed, get the most trendy stack does not mean you will succeed with it.
If you feel skeptical, the following is for you. Otherwise, you’re on the right track and it worth to read it.
Let’s get back on the track.
In spite of their notoriety, ReactJS, VueJS, and Angular are not an adequate choice for beginners to develop frontend applications. Indeed, they lack strong conventions. Clear constraints.
The more you remove distraction from your learning, the more-easily you understand what you learn
I can’t agree with Steve Jobs more (at Apple’s WWDC in 1997) :
Focusing is about saying ‘no’ […] You’ve got to say ‘no, no, no’ and when you say ‘no,’ you piss off people.
On the path of becoming a professional developer— not necessarily an expert on a specific framework, say no to JSX, RxJS, Redux, Webpack conf and everything which distracts you from your way. Keep in mind that, the more you remove distraction from your learning, the more-easily you understand what you learn.
In addition to French bakeries, my best expertise is Web engineering. I’ve been managing and coaching juniors since 2014 on Drupal, EmberJS, Angular and Web architectures. Here’s an assumed point of view which engages only me, and you, readers. Feel free to share yours in a comment.
Notice that there is no “one best framework”. However, as Eric Girouard described brilliantly, there is only one programming language which rules them all (no spoiler, go to read it)
Stop being a junior. Be a professional
It would make sense that each one has his own interpretation of what is a professional developer. I built mine upon the compromise of “what benefits the most for the interests of developers, companies and end users”. In fine, the professional applies himself to reaching the end-users’ fulfillment, not his stakeholders’ one. Caution, it’s a very situational conception.
The professional applies himself to reaching the end-users’ fulfillment, not his stakeholders’ one.
Most juniors I’ve been working with, if not all, code as they’ve been building things with LEGO®. Admittedly, ideas and principles are here. Realistically, it’s not ready for production. Citroën’s engineers didn’t create the C4 WRC with LEGO® (even not LEGO® Technic).
EmberJS gives you a frame whereto work on your applications. It provides enough constraints to avoid basics architecture mistakes and enough freedom to enjoy developing with ease. That’s why EmberJS is a framework, unlike ReactJS and VueJS, which are libraries like GlimmerJS, the equivalent in EmberJS.
The essential concepts to draw up your chef-d’oeuvre, EmberJS provides them. So, even if you don’t master them all yet, it will guide you to get:
- clean application boundaries
- clean file structure
- clean Dependency Injection
Clean architecture and clean code are a rule-of-thumb to succeed in your projects and get yourself to the path of being a professional. Not limited to them, though. You understand the matter of the architecture once you’ve been changing and maintaining your — or one of your colleague’s — application. Also, to go deeper into that clean concept, the SOLID principles from the Clean Architecture of Uncle Bob is a must-read. Not only for OOP.
From an application perspective, the main difficulty you face with libraries like React and VueJS is to organize your application. Moreover, where to draw the boundaries of your application concerns. Think about Eric Elliott from his post “JSX Looks Like An Abomination”.
If you’re putting business rules in React components, you’re doing it wrong.
(He is a React advocate, author of “Learn JavaScript Isomorphic App Development with Node, ES6, & React”, Leanpub).
While getting a clean code and a clean architecture is the priority of every professional, managing paradigms, patterns, and syntax may distract from your goals. You can relay yourself on EmberJS to focus on the features of your web application.
🚀
About EmberJS
EmberJS is a full-featured Single Page Application framework to create ambitious frontend applications. No need to set up your build-pipeline, or to integrate packages to get the all fundamental SPA’s functionalities working together.
Its first release dates from 2011, initially as a fork of SproutCore (started on 2007). Now, on 2019, EmberJS includes:
- a reliable development toolkit that Angular based its angular-cli
- a router for the backbone of the navigation
- a component system and templating engine
- a robust data layer to work with APIs and manage application state
- a browser extension for debugging and inspecting your application
- a community to support you, and support this open source project
Various companies use it — from components usages to large enterprise applications, such as Microsoft, Netflix, Twitch, or Heroku.
Example
Let’s illustrate a common use case, based on a Tweet of Vincent Riemer:
Its author made the main picture pretty clear: handling the state of a React application while transitioning in and out. Even if it’s explicit, it requires the readers a deep mental parsing (6 levels). It might be challenging for juniors — and even intermediate, to properly read and design a bit more complex use-cases. Particularly on choosing an explicit wording.
Because EmberJS employs different patterns than React, such things are much more straightforward to achieve. Behind the hood, the Dependency Injection makes services available through your entire application.
Retrieve data from your API using the query params on entering a route and handling transition in and out the route:
Thanks to nullvoxpopuli, it’s even easier to access the query parameters using the addon ember-query-params-service.
And yep. Extending EmberJS’s features is as easy as this: ember install my-addon. No need configuration. There are a lot of add-ons. You won’t have any dependency of the hell, as you can quickly end up with Angular (for just a few components in a page ..):
EmberJS avoids you from getting down the road. It lets you focus on your features while guiding you through the entire development cycle of your application.
Try EmberJS
There are much more to talk about. The best thing to do is to try EmberJS out now. Follow me (soon, a series of best practices) and subscribe to Ember Times to keep in touch with the latest news.
It worth to mention that React and VueJS are amazing libraries. They provide reliable solutions to web applications’ development problems. CycleJS, Svelte, GlimmerJS, and all-what-ever-JS would give you superpower for resolving your problems, but remember:
With great power there must also come great responsibility!
I am willing to hear from you! What is your vision of a professional developer? What are the ambitious projects you have made with EmberJS? The community is about to reveal a new Edition, as pzuraq talks about on Ember 2019: The Next Edition, don’t miss it. Let’s keep in touch!
