docs

Table of contents

1. Introduction
   1. Background
   2. Challenges
   3. What we came up with
      1. Webpack
      2. Template
      3. Application
      4. Building
      5. Preview components
      6. Integration
   4. Closing words
2. Setup guide
   1. Preparations
      1. Compatability note
      2. Release notes
      3. Get familiar with the technologies
         1. Handlebars
         2. SCSS
         3. TypeScript
         4. Knockout
      4. Setup your environment
         1. Install Node.js
         2. Install Yarn
         3. Install the seng-generator CLI
   2. Getting started
      1. Setup the project
         1. Download source code
         2. Install dependencies
         3. Running the development server
         4. Running the Storybook server
         5. Clean boilerplate code
      2. Create a distribution build
         1. Preview your distribution build
         2. Analyze your distribution build
      3. Code quaility
         1. EditorConfig
         2. Prettier
         3. Linting
            1. esLint
            2. StyleLint
         4. Pre-commit hook
3. Component
   1. Types
      1. Component
         1. Handlebars
         2. SCSS
         3. Stories
      2. Smart-component
         1. Handlebars
         2. SCSS
         3. TypeScript
         4. Stories
      3. Block
         1. Handlebars
         2. SCSS
         3. TypeScript
         4. Data
            1. Local data
            2. Referenced data
         5. Stories
4. Page
   1. Title
   2. Meta
   3. Blocks
      1. Name
      2. Data
         1. Page data
         2. Imported data
5. Application
   1. Bootstrapping
   2. Development bootstrapping
   3. Production bootstrapping
   4. Application Lifecycle
6. Dynamic data
   1. Data provider
   2. Data templates
7. Handlebars
   1. Partials
   2. Helpers
      1. Condition
      2. Custom helpers
8. Knockout
   1. API Reference
      1. applyBindingsToNode
      2. applyBindingAccessorsToNode
9. API Reference
   1. Muban
      1. initComponents
      2. cleanElement
      3. updateElement
      4. getComponentForElement
   2. Handlebars
      1. renderItem
      2. renderItems
   3. Knockout
      1. initTextBinding
      2. initListBinding
   4. Bootstrap
      1. Development
      2. Distribution
10. Storybook
    1. Setup
    2. Example
11. Transitions and animations
12. Dist implementation guide
13. Guides
    1. Muban
       1. Create a component
       2. Create a smart-component
       3. Create a block
       4. Create a page
       5. Do not use the default index template
       6. Using JSON for data files
       7. Using JavaScript for data files
       8. Using JSON for page files
       9. Using JavaScript for page files
       10. Use custom variables in your data
       11. Updating the HTML boilerplate
       12. Using assets
    2. TypeScript
       1. Ensure all components have been initalised
       2. Select child element/elements
       3. Adding event listeners
       4. Add a polyfill
       5. Get data from data-attributes
       6. Get data from embedded json
       7. Get data through a http-request
       8. Update an entire section through a http-request
          1. The API returns HTML
          2. The API returns JSON
       9. Sort or filter items already in the DOM.
       10. Load more items to the page
           1. Use an existing DOM element
           2. Use a handlebars template
           3. Use a knockout template
    3. Handlebars
       1. Render data in your component
       2. Render data as HTML in your component
       3. Render a component
       4. Dynamically render components
       5. Using icons
       6. Create a custom helper
    4. Knockout
       1. Apply bindings to a node
       2. Apply bindings to the entire component
    5. Webstorm
       1. Prettier shortcut
    6. Seng-generator
       1. Create a custom template
    7. Connectors