Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第64回 HTML5とか勉強会 〜 Angular特集 〜

第64回 HTML5とか勉強会 〜 Angular特集 〜

Tessei Yoshida

April 22, 2016
Tweet

More Decks by Tessei Yoshida

Other Decks in Technology

Transcript

  1. ςΩετ ANGULAR2࢖ͬͯ·͔͢ʁ ▸ React΍ͬͯΔ ▸ AngularJS 1.2Ͱফ໣͍ͯ͠Δ ▸ jQuery͓͍͍͠ ▸

    TypeScript͕ഽʹ߹Θͳ͍ ▸ Ͳ͏͍͏;͏ʹ࢝ΊΕ͹͍͍͔Θ͔Βͳ͍
  2. ςΩετ STARTER KITͱ͸ʁ ▸ ݱࡏͷϓϩδΣΫτ͸ ▸ TS/ES2015 ▸ Less/Sass ▸

    ύοέʔδಡΈࠐΈ (bower npm) ▸ Ϣχοτςετ ▸ e2eςετ ▸ ΢ΣϒϑΥϯτ ▸ Grunt/Gulp ▸ ґଘؔ܎
  3. ςΩετ YEOMAN ▸ Node JS πʔϧ ▸ npm install -g

    yo ▸ ର࿩ࣜ ▸ Ruby on RailsΛϦεϖΫτ ▸ generatorͱ͍͏ΤίγεςϜͰճ͍ͬͯΔ
  4. ςΩετ GENERATOR ▸ http://yeoman.io/generators/ ʹͯݕࡧՄೳ ▸ yo ͔Β΋ݕࡧՄೳ ▸ angular2Ͱݕࡧ͢Δͱ

    19 ݅ώοτ ▸ ·ͩ·ͩɺߋ৽͸͋Δ ▸ ެ։΋package.jsonʹهೖ͚ͩͰ؆୯
  5. ςΩετ ANGULAR2-EGGS ▸ This generator are using Angular2, Angular Component

    Router, Bootstrap v4(alpha) and Express on Node.js. ▸ Instead of MongoDB, it will use the lighter TingoDB. ▸ Unit Test(unfinished) ▸ End-to-End Test ▸ Documentation(unfinished) ▸ Coverage(unfinished) ▸ Metric(unfinished)
  6. ςΩετ REPOSITORY ▸ Angular2 starterͰݕࡧ ▸ 308 repositories ▸ Angular2

    seedͰݕࡧ ▸ 262 repositories ▸ forkͱ͔͕ଟ͍ͷͰ[Most starts]ͰsortΛ͔͚Δͱྑ͍Α
  7. ςΩετ ANGULARCLASS/ANGULAR2-WEBPACK-STARTER ▸ An Angular 2 Starter kit featuring Angular

    2 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod) ▸ Material Design ▸ Karma ▸ Protractor ▸ Jasmine ▸ Istanbul ▸ TypeScript ▸ TsLint ▸ Codelyzer ▸ Hot Module Replacement ▸ Typings ▸ Webpack
  8. ςΩετ ROGERPADILLA/ANGULAR2-MINIMALIST-STARTER ▸ Production ready (commands: npm run start.prod, npm

    run build.prod) ▸ Single generated bundle file (system module) with source-maps ▸ Incremental Compilation for TypeScript files ▸ TypeScript (almost) everywhere ▸ Backend integration (rest API) ▸ Live-reload when the source-code changes ▸ Static analysis linter for TypeScript ▸ Karma setup ▸ Example tests ▸ Example Express setup (for backend; frontend is decoupled)
  9. ςΩετ PREBOOT/ANGULAR2-WEBPACK ▸ Best practices in file and application organization

    for Angular 2. ▸ Ready to go build system using Webpack for working with TypeScript. ▸ Easily add new components using Angular 2 cli. ▸ Testing Angular 2 code with Jasmine and Karma. ▸ Coverage with Istanbul ▸ End-to-end Angular 2 code using Protractor. ▸ Stylesheets with SASS (not required, it supports regular css too). ▸ Error reported with TSLint. ▸ Documentation with TypeDoc.
  10. ςΩετ ANTONYBUDIANTO/ANGULAR2-STARTER ▸ TypeScript for the base language ▸ with

    Typings for TypeScript definition manager ▸ Gulp for workflow (from serve, watch, compile, test to build) ▸ Bower for front-end package manager ▸ NPM for angular2 & dev-tooling package manager ▸ Live Server for development server & reload capability ▸ SystemJS for module loader ▸ Karma for test-runner ▸ Jasmine for test framework ▸ Istanbul for test coverage ▸ with Remap Istanbul for remapping Javascript to TypeScript coverage ▸ SystemJS Builder for module bundling in production
  11. ςΩετ BLACKSONIC/ANGULAR2-ES6-STARTER ▸ Pure Javascript implementation. ▸ Uses Babel to

    support class/parameter decorators. ▸ Bundles files with Webpack. ▸ Automates tasks with Gulp. ▸ Automatically rebundles and refreshes the browser on changes. ▸ Unit testing with Karma and Jasmine. ▸ Code coverage for original ES6 code. ▸ E2E testing with Protractor. ▸ Includes deployment to Heroku. ▸ Linting with ESlint based on Airbnb's styleguide. ▸ Optional typing with Flow.
  12. ςΩετ MGECHEV/ANGULAR2-SEED ▸ Allows you to painlessly update the seed

    tasks of your already existing project. ▸ Out of the box ServiceWorkers and AppCache support thanks to the integration with angular/ progressive. ▸ Ready to go, statically typed build system using gulp for working with TypeScript. ▸ Production and development builds. ▸ Sample unit tests with Jasmine and Karma including code coverage via istanbul. ▸ End-to-end tests with Protractor. ▸ Development server with Livereload. ▸ Following the best practices for your application's structure. ▸ Manager of your type definitions using typings. ▸ Has autoprefixer and css-lint support.
  13. ςΩετ NATHANWALKER/ANGULAR2-SEED-ADVANCED ▸ An advanced Angular2 seed project with support

    for ngrx/ store, ng2-translate, angulartics2, lodash, NativeScript (*native* mobile), Electron (Mac, Windows and Linux desktop) and more coming soon...
  14. ςΩετ ANGULAR/ANGULAR2-SEED ▸ A simple starter project demonstrating the basic

    concepts of Angular 2. ▸ This branch uses Webpack for Development. There is also a SystemJS branch available.
  15. ςΩετ GHPABS/ANGULAR2-SEED-PROJECT ▸ Gulp fully automated workflow. ▸ Development and

    production environment targets. ▸ Unit and E2E test samples. ▸ Code coverage report with TypeScript mapping. ▸ TypeScript definition manager, linting, sourcemaps and transpilation (ES5). ▸ Sass linting, sourcemaps and transpilation. ▸ TypeDoc documentation generator. ▸ Change Log generated based on Git metadata.
  16. ςΩετ STARTER KITͷԿ͕ྑ͍ͷ͔ʁ ▸ ؀ڥ͕͸͡Ί͔Βߏங͞Ε͍ͯΔ ▸ TypeScript ͷίϯύΠϧ΍Babelͷઃఆ ▸ Lintͷઃఆ

    ▸ Testαϯϓϧ͕ಉࠝ ▸ ࠓ࣌ͷ։ൃ؀ڥ͔Βखܰʹ։࢝Ͱ͖Δ ▸ ϕετϓϥΫςΟε΍ελΠϧΛಋೖͰ͖Δ
  17. ςΩετ ANGULAR-CLI ▸ Prototype of a CLI for Angular 2

    applications based on the ember-cli project. ▸ Generating a New Project ▸ Generating Components, Directives, Pipes and Services ▸ Generating a Route ▸ Creating a Build ▸ Running Unit Tests ▸ Running End-to-End Tests ▸ Deploying the App via GitHub Pages ▸ Support for offline applications ▸ Commands autocompletion ▸ CSS preprocessor integration ▸ 3rd Party Library Installation