Ray I Can 不 看

Build your own SPA

2016-06-02
web
     

Yo

yo, yo, 切糕要不要，煎饼果子来一套

Yeoman: SetUp the application Frame

What is yeoman ?

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.

Tools

The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Grunt, Gulp, etc) and the package manager (like Bower and npm).

Yo

yo scaffolds out a new application, writing your build configuration (e.g Gruntfile, Gulpfile) and pulling in relevant build tasks and package manager dependencies (Bower, npm) that you might need for your build.

grunt

The Build System is used to build, preview and test your project. Grunt and Gulp are two popular options.

package manager

The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts. Bower and npm are two popular options.

How to Scaffold out our SPA using generator-angular

For step-by-step instructions on using Yeoman and this generator to build a TODO AngularJS application from scratch see this tutorial.

Install yo, grunt-cli, bower, generator-angular and generator-karma:

npm install -g grunt-cli bower yo generator-karma generator-angular

If you are planning on using Sass, you will need to first install Ruby and Compass:

  • Install Ruby by downloading from here or use Homebrew
  • Install the compass gem:
gem install compass

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo angular, optionally passing an app name:

yo angular [app-name]

Run grunt for building and grunt serve for preview

It looks like this:

final

Grunt: build, preview, test your project

Why we need to build ?

  • Improve the website performance:
    • server-side optimization
      • Choose a decent Web Host
      • Host Assets Separately
        • Try a CDN
      • Compression with GZip
      • Minimize Redirects
      • Reduce DNS Lookups
    • assets optimization
      • Merge Multiple Javascripts into One
      • Handling CSS (merge, external fiel)
      • Handling Web Images (merge img to one)
      • Compress Javascript & CSS & img (minimize)
      • Customize Header Expiry/Caching
      • Off-load The Assets
    • test your site
    • monitor your site
  • 10 things you can do to speed up your site
    1. Minimize HTTP Requests
      • Streamline the number of elements on your page.
      • Use CSS instead of images whenever possible.
      • Combine multiple style sheets into one.
      • Reduce scripts and put them at the bottom of the page.
    2. Reduce server response time
    3. Enable compression
    4. Enable browser caching
    5. Minify Resources
    6. Optimize images

      • you need to focus on three things: size, format and the src attribute In HTML, the code for an image includes this:

          <img src=””>

        When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.

      • Combine images into sprites This is a really useful technique that combines commonly used images into a single image file, thus reducing the number of HTTP request that are required to download the webpage. This feature is implemented through proper use of the CSS background-image and background-position properties.

    7. Optimize CSS Delivery inline css
    8. Prioritize above-the-fold content
    9. Reduce the number of plugins you use on your site
    10. Reduce redirects
  • Google – Web Performance Best Practices
  • Yahoo – Best Practices for Speeding Up Your Web Site
  • Steve Souders – 14 Rules for Faster-Loading Web Sites

How the browser work ?

Build task

grunt.registerTask('build', [
  'clean:dist',
  'wiredep:app',
  'useminPrepare',
  'concurrent:dist',
  'ngtemplates',
  'concat',
  'ngAnnotate',
  'copy:dist',
  'shell:login',
  'shell:mgmt',
  'uncss',
  'shell:rm',
  'cssmin',
  'uglify',
  'filerev',
  'usemin',
  'htmlmin'
 ]);

About the Grunt specific, please read another post named Grunt

Comments

Content