max/example.md

## example.md

      
    Raw
  

              example.md
            
          
    Glimmer Apps

Light-weight UI components with the attention to detail you've come to expect
from Ember.
Getting Started

Instead of worrying about project setup, configuration and glue code we want
you to focus on writing components that just work. The fastest way to get
started is to install the Ember CLI and leverage [a basic
blueprint][blueprint]:
$ npm i -g ember-cli
$ ember new -b @glimmerjs/blueprint

You now have a slim project setup with:

A build pipeline that generates your application code
A future-proof yet light-weight directory structure
🔥 code reloading
Everything you need to write your first components

Your First Component


 Check out the generated index.html file

 Highlight the "application component"
 Highlight the sourced JS bundle


 Add your first component inside of the "application component"
 Nest a button component inside of it and set up actions

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello Glimmer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="{{rootUrl}}/app.css">
  </head>

  <body>
    <my-component user={{user}}></my-component>

    <script src="{{rootUrl}}/app.js"></script>
  </body>
</html>
...
import Component from 'glimmer-component';

export default MyComponent extend Component {
  didReceiveAttrs({ newAttrs }) {
    if (newAttrs.user.isAdmin) {
      this.enableTurboButton = true;
    }
  }
}
<div>
  User: {{attrs.user.name}}

  {{#if enableTurboButton}}
    <button>Enable Turbo Mode</button>
  {{/if}}
</div>