It’s easier in Ember. Probably.

One of the things that made me so happy about finding Ember was the ability to get a site up so quickly. No local server setup drama. I just wanted to prototype some pages on a website and have it be a little bit interactive and ffs, why was it so complex?!

Ember allows you to opt into more sensible web development by providing strong defaults that allow you to get started quickly on the simple things, and opt into more complex things- when you are ready. 

In order to demonstrate this, I’ve put together a step-by-step tutorial that will allow you to try using Ember to start a website. It is intended to be specifically useful for developers who specialize in HTML/ARIA (and maybe some CSS). 

(Note: This could even be a step in a team flow that allowed a JS developer to come in later and add dynamic functionality to some elements. Just imagine…) 

Initial Setup

1. Open up your terminal (I use the terminal window in VS Code because it makes an easier workflow for me). 
2. Install Ember – npm install -g ember-cli@3.4.4
3. Create a new app – ember new my-app
4. Change to the app directory – cd my-app
5. Install Sass support – ember install ember-cli-sass
6. Change the app.css file to app.scss – git mv app/styles/app.css app/styles/app.scss
7. Start your server on the first available port – ember s -p 0
8. Confirm that everything looks ok in your browser. You should see the “Congratulations, you made it!” message on the home page
9. Stop your server in your terminal window by pressing CTRL + C
10. Uninstall the ember-welcome-page addon – npm uninstall ember-welcome-page --save-dev
11. Re-start your server on the first available port- ember s -p 0 (hint: you could make it an alias)
12. Confirm that you see a completely blank page in the browser now.

Adding Content

Create Pages

1. Make a list of the pages you want to generate on your website. For the purposes of this tutorial, we’ll create three pages: the home page, an accessibility for designers page, and an accessibilty for developers page.
2. Create the home page- ember generate route index
3. Create the “accessibility for designers” page- ember generate route accessibility/designers
4. Finally, create the “accessibility for developers” page – ember generate route accessibility/developers

Observe

• If you look at your terminal, you’ll see that the ember generate command created a few files for you (just absorb this information for now):
• a file in app/routes
• a file in app/templates
• a test in tests/unit/routes
• If you wanted to, you could go to your browser and check the URLs that you just generated by adding /accessibility/designers to the end of the localhost URL. You’d see blank pages there but you could navigate to them, and you didn’t have to re-start the server to do it.

Add Content – Site Header

1. Open app/templates/application.hbs and remove lines 1-3. There should only be an {{outlet}} in the file.
2. Add the site header to the application.hbs file above the {{outlet}} – 

   <header>
     <nav>
       <ul>
         <li>Practical Accessibility</li>
         <li></li>
         <li></li>
         <li></li>
       </ul>
     </nav>
   </header>
   

3. Add the site links for the navbar. In Ember, you can do a simple inline link like this: {{link-to "Words to be a link" "route.nestedroute"}} So, the end result will look something like this:

   <header>
     <nav>
       <ul>
         <li>Practical Accessibility</li>
         <li>{{link-to "Home" "index"}}</li>
         <li>{{link-to "For Designers" "accessibility.designers" }}</li>
         <li>{{link-to "For Developers""accessibility.developers"}}</li>
       </ul>
     </nav>
   </header>
   

4. Save the file and navigate to your browser, observing again that you didn’t have to do anything extra after you saved your file. The server reloaded the site automatically because it noted the changed file. You’ll see the unstyled list in the browser. If you click on the links, you’ll see that you navigate to all of those pages, and they all have the header.
5. You could also repeat this section to add a footer to the site. Anything added to the app/templates/application.hbs file will load on all pages in the website.

Add Content to the Pages

1. Open the app/templates/index.hbs – you’ll see that it just has {{outlet}} in it for now.
2. Add whatever HTML you want there. No, really. Add some.
3. Save, and open your browser. You’ll see all of the native HTML content on your browser window, in between the header and the footer.
4. Observe again that you didn’t have to reload the server or refresh the browser. Ember did that for you. Warning: at this time, you may start to experience giddy feelings. This feeling may be more or less intense, depending on your level of irritation with things like gulp, grunt, webpack and the like. Other feelings may include overwhelming relief, varied levels of excitement, and general happiness.

Repeat the steps for the other pages you created (in this case, app/templates/accessibility/designers.hbs and app/templates/accessibility/developers.hbs).

Adding Styles

Ok, so the content is there, but it’s not very pleasant to look at. We can change that.

1. Open up the app/styles/app.scss file.
2. Write css/scss/sass. If you used scss, adding some default body styling and updating the header style a little bit could look something like this: 

   
   * {
     margin: 0;
     padding: 0;
   }
   
   *, *:after {
     box-sizing: border-box;
   }
   
   body {
     font-family: sans-serif;
     font-size: 16px;
     line-height: 1.5;
   }
   
   header {
     border-bottom: 1px solid #aeaeae;
   
     nav {
   
       ul {
         align-items: center;
         display: flex;
         flex-flow: row wrap;
         list-style: none;
   
         li {
           display: flex;
           width: 100%;
           @media screen and (min-width:992px) {
             width: auto;
           }
   
           a {
             padding: 1em;
   
             &:hover {
               background-color: aliceblue;
             }
           }
         }
       }
     }
   }
   
   

3. Save it and navigate to the browser. See that styles have been updated. Note that again, you didn’t have to reload anything. Feel happy.

Accessibility

1. Open up the app/index.html file
2. On line 2, add the default site language to the HTML tag – English would look like this: <html lang="en">
3. If you wanted even more awesome feels right now, navigate to your browser. Inspect an element on the page and run the aXe browser extension. Enjoy the satisfaction of seeing the “congratulations!” message.

Wrap Up

I hope I’ve been able to show how Ember gives you the gift of time to focus on the site. Just the site. Only the site. You don’t  have to understand the magic, you can just do what you do best and appreciate that the magic exists.

When you’re ready, you can incrementally learn more- like perhaps how to extract the header and footer into components. Or maybe add some dynamic routing. One day, if you’re feeling really ambitious,  maybe even learn how it all works. It’s there when you’re ready to dive in. That’s what is so amazing to me about this JS framework- it can be used to empower the kind of productivity we have always wished for. I hope you’ll give it a try!