Tools for Polymer at Google IO 2015 Extended in Korea

Anatomy of Polymer Starter Kit

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