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

Transcript

1. ANGULAR2 STARTER 2O16/4/22 HTML5ͱ͔ษڧձ
2. ࣗݾ঺հ ▸ ໊લɿ٢ాపੜ ▸ ᷂τϨλ ։ൃ෦ ▸ Angular2ͰϓϩμΫτΛॻ͍ͯ·͢ ▸ AngularJS Japan User Group ▸ TW @teyosh FB teyosh
3. ςΩετ ANGULAR2࢖ͬͯ·͔͢ʁ ▸ React΍ͬͯΔ ▸ AngularJS 1.2Ͱফ໣͍ͯ͠Δ ▸ jQuery͓͍͍͠ ▸ TypeScript͕ഽʹ߹Θͳ͍ ▸ Ͳ͏͍͏;͏ʹ࢝ΊΕ͹͍͍͔Θ͔Βͳ͍
4. STARTER KIT
5. ςΩετ STARTER KITͱ͸ʁ ▸ ੲͷϓϩδΣΫτ͸ ▸ htmlϑΝΠϧ ▸ javascriptϑΝΠϧ ▸ cssϑΝΠϧ
6. ςΩετ STARTER KITͱ͸ʁ ▸ ݱࡏͷϓϩδΣΫτ͸ ▸ TS/ES2015 ▸ Less/Sass ▸ ύοέʔδಡΈࠐΈ (bower npm) ▸ Ϣχοτςετ ▸ e2eςετ ▸ ΢ΣϒϑΥϯτ ▸ Grunt/Gulp ▸ ґଘؔ܎
7. ςΩετ ղܾ͢ΔͨΊʹ ▸ Yeoman generator ▸ GithubͷϨϙδτϦ
8. ςΩετ YEOMAN ▸ Node JS πʔϧ ▸ npm install -g yo ▸ ର࿩ࣜ ▸ Ruby on RailsΛϦεϖΫτ ▸ generatorͱ͍͏ΤίγεςϜͰճ͍ͬͯΔ
9. ςΩετ YO
10. ςΩετ GENERATOR ▸ http://yeoman.io/generators/ ʹͯݕࡧՄೳ ▸ yo ͔Β΋ݕࡧՄೳ ▸ angular2Ͱݕࡧ͢Δͱ 19 ݅ώοτ ▸ ·ͩ·ͩɺߋ৽͸͋Δ ▸ ެ։΋package.jsonʹهೖ͚ͩͰ؆୯
11. ςΩετ ͪΐͬͱ࢖ͬͯΈ·͠ΐ͏
12. ςΩετ 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)
13. ςΩετ GITHUB ▸ Gitόʔδϣϯ؅ཧγεςϜΛར༻ͨ͠΢ΣϒαʔϏε ▸ ΦʔϓϯιʔεͰ͋Ε͹ແྉͰར༻Մೳ ▸ ࠷ۙΑ͘མ͍ͪͯΔҹ৅
14. ςΩετ REPOSITORY ▸ Angular2 starterͰݕࡧ ▸ 308 repositories ▸ Angular2 seedͰݕࡧ ▸ 262 repositories ▸ forkͱ͔͕ଟ͍ͷͰ[Most starts]ͰsortΛ͔͚Δͱྑ͍Α
15. ςΩετ ਓؾϕετ5 [ANGULAR2 STARTER]
16. ςΩετ
17. ςΩετ 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
18. ςΩετ 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)
19. ςΩετ 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.
20. ςΩετ 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
21. ςΩετ 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.
22. ςΩετ ਓؾϕετ5 [ANGULAR2 SEED]
23. ςΩετ
24. ςΩετ 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.
25. ςΩετ 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...
26. ςΩετ
27. ςΩετ
28. ςΩετ 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.
29. ςΩετ 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.
30. ςΩετ X6DOOOO/GENERATOR-GULP-ANGULAR2 ▸ Yeoman generator for Angular2 + Gulp, base on angular2- seed and generator-gulp-angular
31. ςΩετ ͪΐͬͱ࢖ͬͯΈ·͠ΐ͏
32. ςΩετ STARTER KITͷԿ͕ྑ͍ͷ͔ʁ ▸ ؀ڥ͕͸͡Ί͔Βߏங͞Ε͍ͯΔ ▸ TypeScript ͷίϯύΠϧ΍Babelͷઃఆ ▸ Lintͷઃఆ ▸ Testαϯϓϧ͕ಉࠝ ▸ ࠓ࣌ͷ։ൃ؀ڥ͔Βखܰʹ։࢝Ͱ͖Δ ▸ ϕετϓϥΫςΟε΍ελΠϧΛಋೖͰ͖Δ
33. ςΩετ ϕετϓϥΫςΟεͱελΠϧΨΠυ ▸ https://mgechev.github.io/angular2-style-guide/ ▸ Directory Structure ▸ ໋໊نଇ ▸ TypeScriptίʔυελΠϧ ▸ TSLint΍JSHintͷઃఆ ▸ toolͷ঺հ
34. ςΩετ 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
35. ςΩετ Πϯετʔϧ͏·͍͖͘·ͤΜͰͨ͠(ɹʀ㱼ʀ)
36. ςΩετ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ