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
53

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 full-size slide

  2. Polymer
    Starter Kit

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  5. Download and install

    View full-size slide

  6. .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 full-size slide

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

    View full-size slide

  8. Development Workflow

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 1.0
    for Polymer Starter Kit

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide