Ember.js is one of the most mature web frameworks in this day and age. The Ember Ecosystem has reached a stage where it must take more responsibility for the way that Ember developers author their applications. The way to do this is with better tooling and more of it.
Motivation
I have been working on an Ember application at my "first real developer job ™" for three years. In that time I have been to an EmberFest (Berlin), became part of The Ember Times Newsletter, written an RFC or two, adopted some addons and more. To sum it up, I have fallen in love with the Ember community as a whole. With the second #EmberJS2019 call for blog posts underway I want to make my voice heard regarding the direction that, I think, Ember should take during the next Roadmap.
More Tooling 🔧 🔨
Ember, albeit being a somewhat niche framework compared to React/Angular/Vue/etc, has some amazing tooling built around it. We pioneered the CLI experience, our scaffolding and blueprint generators are top notch, and our build pipeline is strong and robust. We also have a great Ember Inspector browser extension that I couldn't live without. Given that, I am going to talk about the other side of the tooling regarding the authoring experience of actually writing the code.
We currently have many IDE/Editor extensions that improve how we write code. There are extensions for VSCode, JetBrains IDEs and more. I myself use VSCode for all of my Ember needs. I still feel as if Ember doesn't have the appropriate tools for all jobs.
Ember Language Server 🐹 🗣 🖥
The Ember Language Server is an implementation of the Language Server Protocol for Ember projects.
"ELS enables editors to provide features like auto complete, goto definition and diagnostics. To get these features, you have to install the plugin for your editor."
It is possible to use this in VSCode using the VSCode Ember Extension and in Atom using the Atom IDE Ember Extension. The initial work that was done is amazing but we need to keep iterating on top of this work. @lifeart has been experimenting with an Unstable Ember Language Server and his work should be supported and pushed so that everyone can benefit from it. We are slowly moving the Ember framework and templating language to a place where it is easier to statically analyze it. Let's keep going in this direction and more.
Formatting Templates 📝
One area that I feel needs improvement is Handlebars/Glimmer support. Currently in VSCode it is possible to setup the editor to autoformat templates. Taking this a step further would be to use something like Prettier, which I love, and being able to apply it to Ember templates in a simple and ergonomic way. Currently Prettier allows formatting templates but the support is 90% of the way there. We need to finish the journey so that any new, or existing app, can adopt this and reap the benefits of a consistent template style across all templates.
Some further reading:
- Handlebars Formatter
- Support Handlebars
- What would it take to make Glimmer support a bit more official
- Prettier Glimmer Playground
More codemods, lint rules, quick fix shortcuts 💻 📏 🍰
We have an amazing codemod community, an awesome ESLint plugin and Template Lint ecosystem and many more of these tools are coming out on a monthly basis. Alas, I feel that we need to focus on these tools more and more as well as develop more tools that will help out the newbie and the pro at the same time.
For example, a few ESLint rules today such as Order in Components don't work in Native Class syntax. We need to make sure that this plugin is kept updated as well as the others. Another feature that I would like from template-lint is to have the ability to autofix errors. Also, with Octane gearing up to be released soon many current extensions aren't "aware" of it. Many of the snippet extensions for VSCode are outdated and none of them provide <AngleBracket> syntax snippets yet.
Another tool that I feel we need and don't yet have is an IDE/editor extension for Ember Quick Fixes. I think of this akin to using a codemod on a specific file or section of code. An example of this today is the VSCode Convert to async function. This could allow us to do so many things and really improve developer productivity. There is a codemod today to migrate Ember Objects to Native Classes, wouldn't it be cool if we could apply this on a file by file basis?
Another area where this could be really useful is inside of templates. An idea that I have been thinking about for a while now is an export template section to component feature. This would allow extracting parts of a template into a newly generated component. It would know which arguments it needs to pass in and how to use them inside of the component. This alone could save small teams hours every week.
Suggestions 🏁
My suggestion for the future is to create a new Tooling Strike Team. This team would take the interests of the community and try to steer the tooling in that direction. The team wouldn't necessarily need to build everything by themselves but they would be the place to go to find out what needs to be built and what is currently available. A #dev-ember-tooling channel in Discord is needed as not all chat is relevant to #topic-editors.
In addition, there should be a dedicated tooling section in the guides. This would allow developers to learn and make informed decisions about which IDE/editor they should use and the best ways to use them.
Conclusion 🐹
We need to take tooling more seriously! Our community, while small, is so strong. I am already proud of what we have but we can definitely do better with a more targeted and managed approach. Today most of these tooling efforts are done, on the side as a fun side project or built slowly over time without much direction. We have the knowledge and community power to do this. We can do this. 🐹
Summary
| The tldr; | Just read this table if you don't have much time |
|---|---|
| Alon Bukai | Ember Times Editor, Addon maintainer, Lover of Ember Community |
| Suggestions | Lets create a Tooling Strike Team. |
| A `#dev-ember-tooling` channel in Discord. | |
| A dedicated tooling section in the guides. | |
| More Tooling | We have good tools around CLI, scaffolding and generators. |
| We need better IDE/Editor tools | |
| Editor Extensions | VSCode |
| JetBrains IDEs | |
| Ember Language Server | Needs more support and love. Lets make this official and supported. |
| Ember Language Server | |
| Unstable Ember Language Server | |
| Formatting Templates | Lets get Glimmer support for Prettier working correctly |
| Handlebars Formatter | |
| Support Handlebars | |
| What would it take to make Glimmer support a bit more official | |
| Prettier Glimmer Playground | |
| Codemods, Linting, Quick Fixes | Lets up our game regarding these important tools. |
| We have so much more that can be built. | |
| Codemods | |
| ESLint plugin | |
| Template Lint ecosystem | |
| Convert to async function | |
Extract template section to component` refactor |