Yeoman – Modern web development with modern workflow
Yeoman – Modern web development with modern workflow
0 0
yeoman_workflow
A HTML slide to introduce the modern workflow tool "yeoman" for modern web application development.On Github sinergy / yeoman_workflow
Yeoman
Modern web development with modern workflow
Created by Cloud Chen / @twCloudChen
Why Yeoman?
Prerequirements
Before you get started to use yeoman, you got have it installed on your machine. Make sure you have Node.js and Git installed before installing yeoman.
Installation
Once you have Node.js run on your machine, use the following command to install yeoman:
npm install -g yo grunt-cli bower
The command above will install 3 tools on your machine:
yo grunt-cli (grunt command line interface) bowerStep into your first web app
Make a new directory for your web applicaiton, then use the following command to create it:
yo webapp
After execue the yo webapp command, it tells you to run both npm install & bower install to install the related dependencies:
Just follow the notification and run both the commands seperately.
npm install
bower install
While complete all the steps above, you might get these files and folders under your root directory (the directory you run 'yo webapp' command.)
Where we are going to edit the files are all located in the app directory.
Architecture of app folder
The image below display the architecture of the app directory while you first create it.
Files & Folders
- 404.html : Returned HTML to users when 'File not Found'
- index.html : The entry page of the website
- robots.txt : Avoid the search engine to index sensitive page for your site
- images : Put all your images here
- scripts : JavaScripts located here
- styles : CSS (Cascading Style Sheet) files located here
- favicon.ico : Icon displayed for bookmark
Traditional 404 page
The traditonal HTTP 404 response will lead you to a page looks like:
It sucks!
Modern 404 page
You can make a better UI/UX for users by design your 404 page like:
Better!
robots.txt
A robots.txt restricts access to your site by search engine robots that crawl the web. These bots are automated, and before they access pages of a site, they check to see if a robots.txt file exists that prevents them from accessing certain pages. Check this page for more detail information.
Images in one place
Put all your images in one place for easy management and later image optimization step.
3rd-party library installation
For you guys who want to use other libraries which yeoman did not include them by default, you could install them through bower.
For example, we use a parallax scrolling library called Skrollr for our official website. We could install it through bower by following steps:
bower search skrollr
Once bower found this package, you can easily installed it by:
bower install skrollr
Build production version of your site
Before uploading & releasing you site, there are some optimization steps that makes your website get better performance so better UX.
- Optimize images by removing useless headers.
- Minify the CSS, javaScript, HTML files by removing useless spaces, replacing long variable names.
- Concatenate CSS, javaScript files into single one file to minimize the HTTP request number.
- ...etc
Grunt do these tasks for you
Grunt do the repeatitive tasks for you automatically, so that will save lots of time for you to do the real code work. To create the final, optimized website, just use the following grunt command:
grunt build
Yeoman defined a build task of Grunt for you by default. Sweet!