When you're researching what frameworks to use when developing an app, it's like going to a car dealership. Each car brand is, in essence, a framework. Deciding what framework would be best for developing an app comes down to preference. If you've come across Ember.js, then I welcome you!
If you're just starting out with Ember.js, one of the most exciting and important aspects you'll encounter is components. Components are the building blocks of any Ember.js application and help you break down your interface into reusable pieces. But don't worry—though they sound technical, components are a great way to keep your app organized and scalable.
If you've search anything related to Ember, you will find there is basically two versions- class Ember and Ember with Glimmer, I'll walk you through classic Ember.js components, helping you understand what they are, how they work, and how to create your first one!
Components
Components in Ember.js are like small, self-contained UI elements that have their own functionality and style. Let's think of them as the LEGO blocks of our application. Each block will have its own specific purpose, but when put together, they build the complete interface.
For example, a button, a navigation bar, or a modal window can all be individual components. They can take inputs, manage their own state, and send actions or events to other parts of the application.
If you ever ask yourself, "Why should we use components?", here are three great points.
Reusability: Components can be reused across multiple parts of our application, saving us time and effort.
Separation of Concerns: Components encapsulate their behavior and template, which helps to organize code better.
Maintainability: When components are well-structured, it’s easier to update and maintain them as our app grows.
Let's start with what makes a component. An Ember component typically consists of:
Template: This is the HTML with handlebars that defines the visual structure.
Javascript Class: This file would contain the logic behind the component such as managing state or handling a user's input.
Styles: You can define CSS or SCSS styles specific to the component to ensure it looks just the way you want.
Template
Now let's get started on creating a component's template.
Assuming that we already installed ember and its dependencies, lets start by opening up our app in a coding environment. Now remember, templates are responsible for html structures of our components. In our app, we should have an existing application.hbs. We want to display a list of bears, so we would need to create a template for bear-list. For naming convention of ember components, they need to be Pascalcase, which is hyphenated and file type is .hbs (handlebars).
App/templates/components/bear-list.hbs
Now we should have two templates for two components. Next, we will want to add structure in our bear-list.hbs. Let's add a loop that will list each bear from a bears array that we will create later. You'll notice that ember uses mustache syntax to insert dynamic content, handle expressions, and invoke helpers or components.
Javascript Class
Now, that we have our templates for our components, all there is left to do is create our JS files for our our bears-list component. For our bears-list, we need to defined a bears array and an action to that'll allow us to push new bears to array from an input. I won't delve too deep into what our application.js will be responsible for, but it simplest terms, it will handle our state of the app and manage the data from an API.
App/component/bears-list.js
Styles
After the bones of our application has been created, we can focus on styling our app. There should be a default app.css file that we can edit. I've decided to style our button and page. Styling is used with normal CSS formatting.
Conclusion
As for an introduction to Ember JS components, we can see that that components are essentially lego blocks that we can dynamically use to create interactive user interfaces for our ember applications. I hope soon to learn even more to be able to implement the use of API and routes in ember.
Top comments (0)