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

Tools for Polymer at Google IO 2015 Extended in Korea

Jimmy Moon
September 19, 2015
36

Tools for Polymer at Google IO 2015 Extended in Korea

Anatomy of Polymer Starter Kit

Jimmy Moon

September 19, 2015
Tweet

Transcript

  1. Polymer
    Starter Kit
    Polymer
    for
    Tools

    View Slide

  2. View Slide

  3. Polymer
    Starter Kit

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. index.html
    을 생성하고
    먼지 모르지만
    “webcomponents-
    lite.js” 하나 넣고
    “polymer.html”
    추가하고
    ????

    View Slide

  12. View Slide

  13. 다운로드
    하고, 압축
    풀고
    먼지 모르지만
    npm, bower 설치
    하고
    gulp serve 명령치

    아무것도 한 것이
    없는데 Polymer 앱
    이 동작한다.

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. Download and install

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. .dotfiles
    - .editorconfig: Defining coding
    styles and a collection of text
    editor plugins. intend style,
    encoding type
    - .jscsrc: Code style linter for
    programmatically enforcing your
    style guide, preset: google, but
    OPTIONAL or http://eslint.org/
    - .jshintrc: Detect errors and
    potential problems in your
    JavaScript code

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. PolymerElements/app-layout-templates - https://goo.gl/dOyjOh

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. Development Workflow

    View Slide

  41. i’m lovin’ gulp
    mocha
    jshint
    jscs
    autoprefixer
    sass
    sourcemap
    uglify
    uncss
    sw-precache
    imagemin
    jasmine
    babel
    browser-sync

    View Slide

  42. View Slide

  43. View Slide

  44. Web Components Tester Config File
    - Makes testing your web
    components
    - More config
    - persistent: If you want to
    keep browsers opening

    View Slide

  45. 1.0
    for Polymer Starter Kit

    View Slide

  46. View Slide

  47. npm-stat: yo - http://goo.gl/GCtnN3

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. http://ih0.redbubble.net/image.45526401.8374/mug,travel,x400,left-bg,ffffff.2.jpg

    View Slide

  54. PolymerLabs/crisper - https://goo.gl/pIO7oa

    View Slide

  55. gulp-crisper - https://goo.gl/Z7onHz

    View Slide

  56. Custom Elements - Explore the world of Web Components - https://goo.gl/QWRvDO

    View Slide

  57. Polymer Repositories Status Report - http://goo.gl/B7Y020

    View Slide

  58. ragingwind/polymer-samples - https://goo.gl/eX25Ga

    View Slide

  59. PolymerLabs/polyserve - https://goo.gl/PsoclS

    View Slide

  60. View Slide


  61. @ragingwind

    View Slide