Introduction to Yeogurt Generator

A Yeoman generator that creates a sensible structure for static sites and single page applications by using your favorite tools.

Transcript

1. Scaffolding generator for modern front-end development
   

   View Slide

2. Underlying Technologies
   Allow user to make
   choices on how to
   generate their folder
   structure and desired
   packages, tasks, and
   compilers
   Runs automated tasks
   such as: minifying code,
   concatenating files,
   compiling
   preprocessors, lint
   code, run unit and
   functional tests, and
   much more.
   Package manager for
   front end libraries,
   plugins, and code in
   general. Helps with
   version management,
   dependencies, and file
   fetching
   

   View Slide

3. Generator Options
   • Project/Site naming
   
   • Static Site or Single Page Application
   
   • CSS Preprocessing with LESS or Sass
   
   • Modular JavaScript with RequireJS or
   Browserify
   
   • IE8+ Support via HTML5shiv and
   RespondJS
   
   • JavaScript Linting with JSHint
   
   • Default ignores for Git or SVN
   
   • Build deployment to FTP server
   
   • Bootstrap 3.x or Foundation 5.x
   
   • Font Awesome 4.x
   

   View Slide

4. Generator Options (cont.)
   • Jade or Swig templating.
   
   • Can drop down to regular HTML if need be
   
   Static Site
   • Built off of Backbone MV* Library
   
   • Jade, Handlebars, or Lo-dash (Underscore)
   templating.
   
   • Can also use Facebook’s React view framework
   
   Single Page Applications
   

   View Slide

5. Default Features
   • Template inspiration from HTML5 Boilerplate
   
   • Feature detection with Modernizr
   
   • Built in preview server with LiveReload
   
   • .editorconfig for consistent coding styles within text
   editors
   
   • JavaScript unit testing with Mocha + Chai or Jasmine
   • Karma used for running tests within browsers and
   PhantomJS
   
   • Automatic build process that includes
   concatenation, image optimization, CSS and HTML
   minification, and JS uglification.
   
   • Dynamic Dashboard - auto-generated dashboard
   for your site
   
   • Dynamic Styleguide - auto-generated styleguide
   using KSS (Knyle Style Sheets)
   
   • Dynamic JavaScript API - auto-generated API
   documentation through Docker using JSDoc and
   Markdown
   • Sourcemaps for both JavaScript and Sass/LESS
   

   View Slide

6. Grunt Tasks
   grunt server
   Starts up a development server that watches for
   local file changes and automatically reloads them to
   the browser.
   
   grunt test
   Runs JSHint and Mocha to lint and unit test
   JavaScript, respectively.
   
   grunt build
   Builds out an optimised site through minification of
   CSS and HTML, as well as uglification and
   optimisation(RequireJS) of Javascript.
   
   grunt zip
   Runs grunt build and compresses the entire site to
   a ZIP file
   
   grunt deploy
   Runs grunt zip and pushes both production-ready
   files and zip file to a specified FTP server
   

   View Slide

7. Views Structure
   • 3 categories
   • Components
   
   • Templates
   
   • Pages
   
   • Helps stay as ‘DRY’ as possible (Don’t
   Repeat Yourself)
   • Maximizes reusability of markup
   • Harnesses the power of Jade/Swig
   • Variables
   
   • Mixins
   
   • Blocks
   
   • Markup extensions (via ‘extend’)
   ├── views
   
   │ ├── components
   
   │ │ ├── all-components
   
   │ │ ├── heading
   
   │ └── templates
   
   │ ├── base
   
   | index
   

   View Slide

8. Page Structure
   Components
   Templates Pages
   

   View Slide

9. Dynamic Dashboard
   • Built dynamically through
   comments in development files
   
   • Lists out all categories you
   specifiy
   
   • Works with Jade, Swig, and
   HTML
   
   • Allow for status changes out of
   the box (Status key)
   
   • Saves you from manual updates
   for client-facing work
   
   • Responsive Design
   

   View Slide

10. Sourcemaps
    • Sourcemaps created when using
    either Sass or LESS as well as all
    JavaScript.
    
    • Allow Firefox and Chrome Dev
    tools to map back from minified/
    compiled files to their original
    source
    
    • Gives the ability to network map
    files loaded in the browser down
    to development files on your file
    system. (Chrome only)
    

    View Slide

11. THANK YOU
    

    View Slide