การสร้างเว็บแอปด้วย Yeoman และ Polymer

สร้างโครงสร้างพื้นฐานของเว็บแอปด้วยเครื่องมือที่ทันสมัย

Addy Osmani

บทนำ

สวัสดี ใครก็ตามที่เขียนเว็บแอปจะรู้ว่าการรักษาประสิทธิภาพการทำงานของตนเองนั้นสำคัญเพียงใด การต้องกังวลเกี่ยวกับงานที่น่าเบื่ออย่างการค้นหาต้นแบบที่เหมาะสม การตั้งค่าเวิร์กโฟลว์การพัฒนาและการทดสอบ รวมถึงการลดขนาดและการบีบอัดแหล่งที่มาทั้งหมดเป็นเรื่องที่ท้าทาย

โชคดีที่เครื่องมือส่วนหน้าสมัยใหม่ช่วยให้กระบวนการนี้เป็นแบบอัตโนมัติได้เป็นส่วนใหญ่ คุณจึงมุ่งเน้นที่การเขียนแอปที่ยอดเยี่ยมได้ บทความนี้จะแสดงวิธีใช้ Yeoman ซึ่งเป็นเวิร์กโฟลว์ของเครื่องมือสำหรับเว็บแอปเพื่อปรับปรุงการสร้างแอปโดยใช้ Polymer ซึ่งเป็นไลบรารีของ Polyfill และ Sugar สำหรับการพัฒนาแอปโดยใช้คอมโพเนนต์เว็บ

Yeoman

พบกับ Yo, Grunt และ Bower

Yeoman คือชายสวมหมวกที่มีเครื่องมือ 3 อย่างสำหรับเพิ่มประสิทธิภาพการทำงานของคุณ ได้แก่

  • yo เป็นเครื่องมือสร้างโครงร่างที่นำเสนอระบบนิเวศของโครงร่างเฉพาะเฟรมเวิร์กที่เรียกว่า Generator ซึ่งสามารถใช้เพื่อทำงานที่น่าเบื่อบางอย่างที่ฉันได้กล่าวถึงก่อนหน้านี้
  • grunt ใช้เพื่อสร้าง แสดงตัวอย่าง และทดสอบโปรเจ็กต์ของคุณ ด้วยความช่วยเหลือจากงานที่ดูแลจัดการโดยทีม Yeoman และ grunt-contrib
  • bower ใช้สำหรับการจัดการทรัพยากร Dependency เพื่อให้คุณไม่ต้องดาวน์โหลดและจัดการสคริปต์ด้วยตนเองอีกต่อไป

เพียงใช้คำสั่ง 1 หรือ 2 คำสั่ง Yeoman ก็สามารถเขียนโค้ด Boilerplate สำหรับแอป (หรือแต่ละส่วน เช่น โมเดล) คอมไพล์ Sass, ลดขนาดและเชื่อมโยง CSS, JS, HTML และรูปภาพ รวมถึงเปิดเว็บเซิร์ฟเวอร์แบบง่ายในไดเรกทอรีปัจจุบันได้ นอกจากนี้ยังเรียกใช้ Unit Test และอื่นๆ ได้ด้วย

คุณสามารถติดตั้งเครื่องมือสร้างจาก Node Packaged Modules (npm) และตอนนี้มีเครื่องมือสร้างมากกว่า 220 รายการ เผยแพร่แล้ว ซึ่งหลายรายการเขียนขึ้นโดยชุมชนโอเพนซอร์ส เครื่องมือสร้างที่ได้รับความนิยม ได้แก่ generator-angular, generator-backbone และ generator-ember

หน้าแรกของ Yeoman

เมื่อติดตั้ง Node.js เวอร์ชันล่าสุดแล้ว ให้ไปที่เทอร์มินัลที่ใกล้ที่สุดแล้วเรียกใช้คำสั่งต่อไปนี้

$ npm install -g yo

เท่านี้ก็เรียบร้อย ตอนนี้คุณมี Yo, Grunt และ Bower แล้ว และสามารถเรียกใช้ได้โดยตรงจากบรรทัดคำสั่ง นี่คือเอาต์พุตของการเรียกใช้ yo

การติดตั้ง Yeoman

เครื่องมือสร้างโพลิเมอร์

ดังที่ได้กล่าวไปก่อนหน้านี้ Polymer เป็นไลบรารีของโพลีฟิลล์และซูการ์ที่ช่วยให้สามารถใช้คอมโพเนนต์เว็บในเบราว์เซอร์ที่ทันสมัยได้ โปรเจ็กต์นี้ช่วยให้นักพัฒนาแอปสร้างแอปโดยใช้แพลตฟอร์มแห่งอนาคตและแจ้งให้ W3C ทราบถึงจุดที่สามารถปรับปรุงข้อกำหนดที่อยู่ระหว่างดำเนินการได้

หน้าแรกของเครื่องมือสร้าง Polymer

generator-polymer เป็นเครื่องมือสร้างใหม่ที่ช่วยให้คุณสร้างแอป Polymer โดยใช้ Yeoman ซึ่งช่วยให้คุณสร้างและปรับแต่งองค์ประกอบ Polymer (ที่กำหนดเอง) ได้อย่างง่ายดายผ่านบรรทัดคำสั่ง และนำเข้าองค์ประกอบเหล่านั้นโดยใช้การนำเข้า HTML ซึ่งจะช่วยประหยัดเวลาด้วยการเขียนโค้ด Boilerplate ให้คุณ

จากนั้นติดตั้งเครื่องมือสร้างของ Polymer โดยเรียกใช้คำสั่งต่อไปนี้

$ npm install generator-polymer -g

เท่านี้เอง ตอนนี้แอปของคุณมีพลังพิเศษของคอมโพเนนต์เว็บแล้ว

เครื่องมือสร้างที่ติดตั้งใหม่มีส่วนเฉพาะบางอย่างที่คุณจะเข้าถึงได้ ดังนี้

  • polymer:element ใช้เพื่อสร้างโครงสร้างองค์ประกอบ Polymer ใหม่แต่ละรายการ เช่น yo polymer:element carousel
  • polymer:app ใช้เพื่อสร้างโครงสร้าง index.html เริ่มต้น, Gruntfile.js ที่มีการกำหนดค่าเวลาบิลด์สำหรับโปรเจ็กต์ รวมถึงงาน Grunt และโครงสร้างโฟลเดอร์ที่แนะนำสำหรับโปรเจ็กต์ นอกจากนี้ยังให้ตัวเลือกในการใช้ Sass Bootstrap สำหรับสไตล์ของโปรเจ็กต์ด้วย

มาสร้างแอป Polymer กัน

เราจะสร้างบล็อกง่ายๆ โดยใช้องค์ประกอบ Polymer ที่กำหนดเองและเครื่องมือสร้างใหม่ของเรา

แอป Polymer

เริ่มต้นโดยไปที่เทอร์มินัล สร้างไดเรกทอรีใหม่ และ cd เข้าไปโดยใช้ mkdir my-new-project && cd $_ ตอนนี้คุณเริ่มใช้แอป Polymer ได้โดยเรียกใช้คำสั่งต่อไปนี้

$ yo polymer
การสร้างแอป Polymer

ซึ่งจะดึง Polymer เวอร์ชันล่าสุดจาก Bower และสร้างโครงสร้างพื้นฐานของ index.html, โครงสร้างไดเรกทอรี และงาน Grunt สำหรับเวิร์กโฟลว์ของคุณ ระหว่างรอให้แอปเตรียมพร้อมเสร็จสิ้น คุณจะไปดื่มกาแฟสักแก้วก่อนก็ได้นะ

ต่อไปเราจะเรียกใช้ grunt server เพื่อดูตัวอย่างหน้าตาของแอปได้

เซิร์ฟเวอร์ Grunt

เซิร์ฟเวอร์รองรับ LiveReload ซึ่งหมายความว่าคุณสามารถเปิดเครื่องมือแก้ไขข้อความ แก้ไของค์ประกอบที่กำหนดเอง และเบราว์เซอร์จะโหลดซ้ำเมื่อบันทึก ซึ่งจะช่วยให้คุณเห็นภาพรวมแบบเรียลไทม์ของสถานะปัจจุบันของแอป

ต่อไป เราจะสร้างองค์ประกอบ Polymer ใหม่เพื่อแสดงบล็อกโพสต์

$ yo polymer:element post
สร้างองค์ประกอบโพสต์

Yeoman จะถามคำถามเรา 2-3 ข้อ เช่น เราต้องการรวมคอนสตรัคเตอร์หรือใช้การนำเข้า HTML เพื่อรวมองค์ประกอบโพสต์ใน index.html หรือไม่ สมมติว่าเราเลือก "ไม่" สำหรับ 2 ตัวเลือกแรกในตอนนี้ และปล่อยตัวเลือกที่ 3 ว่างไว้

$ yo polymer:element post

[?] Would you like to include constructor=''? No

[?] Import to your index.html using HTML imports? No

[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)

    create app/elements/post.html

การดำเนินการนี้จะสร้างองค์ประกอบ Polymer ใหม่ในไดเรกทอรี /elements ที่ชื่อ post.html

<polymer-element name="post-element"  attributes="">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

    <span>I'm <b>post-element</b>. This is my Shadow DOM.</span>

    </template>

    <script>

    Polymer('post-element', {

        //applyAuthorStyles: true,

        //resetStyleInheritance: true,

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

ซึ่งประกอบด้วย

การทำงานกับแหล่งข้อมูลจริง

บล็อกของเราจะต้องมีพื้นที่สำหรับเขียนและอ่านโพสต์ใหม่ เราจะใช้ Google Apps Spreadsheets API เพื่อสาธิตการทำงานกับบริการข้อมูลจริง ซึ่งจะช่วยให้เราอ่านเนื้อหาของสเปรดชีตที่สร้างโดยใช้ Google เอกสารได้อย่างง่ายดาย

มาเริ่มตั้งค่ากันเลย

  1. เปิดสเปรดชีต Google เอกสารนี้ในเบราว์เซอร์ (ขอแนะนำให้ใช้ Chrome สำหรับขั้นตอนเหล่านี้) โดยจะมีข้อมูลโพสต์ตัวอย่างในช่องต่อไปนี้

    • รหัส
    • ชื่อ
    • ผู้เขียน
    • เนื้อหา
    • วันที่
    • คีย์เวิร์ด
    • อีเมล (ของผู้เขียน)
    • Slug (สำหรับ URL ของ Slug ของโพสต์)

  2. ไปที่เมนูไฟล์ แล้วเลือกทำสำเนาเพื่อสร้างสำเนาสเปรดชีตของคุณเอง คุณสามารถแก้ไขเนื้อหาได้ตามต้องการ โดยจะเพิ่มหรือนำโพสต์ออกก็ได้

  3. ไปที่เมนูไฟล์อีกครั้ง แล้วเลือกเผยแพร่ไปยังเว็บ

  4. คลิกเริ่มเผยแพร่

  5. ในส่วนรับลิงก์ไปยังข้อมูลที่เผยแพร่ ให้คัดลอกส่วนคีย์ของ URL ที่ระบุจากกล่องข้อความสุดท้าย ซึ่งจะมีลักษณะดังนี้ https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0

  6. วางคีย์ลงใน URL ต่อไปนี้ตรงที่ระบุว่า your-key-goes-here: https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback= ตัวอย่างการใช้คีย์ด้านบนอาจมีลักษณะดังนี้ https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script

  7. คุณสามารถวาง URL ลงในเบราว์เซอร์และไปยัง URL ดังกล่าวเพื่อดูเนื้อหาบล็อกในเวอร์ชัน JSON จดบันทึก URL แล้วใช้เวลาสักครู่เพื่อตรวจสอบรูปแบบของข้อมูลนี้ เนื่องจากคุณจะต้องทำซ้ำเพื่อแสดงข้อมูลบนหน้าจอในภายหลัง

เอาต์พุต JSON ในเบราว์เซอร์อาจดูน่ากลัวเล็กน้อย แต่ไม่ต้องกังวล เราสนใจเฉพาะข้อมูลสำหรับโพสต์ของคุณเท่านั้น

Google Spreadsheets API จะแสดงผลแต่ละช่องในสเปรดชีตบล็อกของคุณด้วยคำนำหน้าพิเศษ post.gsx$ เช่น post.gsx$title.$t, post.gsx$author.$t, post.gsx$content.$t และอื่นๆ เมื่อเราทำซ้ำในแต่ละ "แถว" ในเอาต์พุต JSON เราจะอ้างอิงช่องเหล่านี้เพื่อรับค่าที่เกี่ยวข้องสำหรับแต่ละโพสต์

ตอนนี้คุณสามารถแก้ไของค์ประกอบโพสต์ที่สร้างขึ้นใหม่เพื่อเชื่อมโยงส่วนต่างๆ ของมาร์กอัปกับข้อมูลในสเปรดชีตได้แล้ว โดยเราจะแนะนำแอตทริบิวต์ post ซึ่งจะอ่านชื่อโพสต์ ผู้เขียน เนื้อหา และช่องอื่นๆ ที่เราสร้างไว้ก่อนหน้านี้ แอตทริบิวต์ selected (ซึ่งเราจะป้อนข้อมูลในภายหลัง) ใช้เพื่อแสดงโพสต์ก็ต่อเมื่อผู้ใช้ไปยัง Slug ที่ถูกต้องสำหรับโพสต์นั้นเท่านั้น

<polymer-element name="post-element" attributes="post selected">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

        <div class="col-lg-4">

            <template if="[[post.gsx$slug.$t === selected]]">

            <h2>
                <a href="#[[post.gsx$slug.$t]]">
                [[post.gsx$title.$t  ]]
                </a>
            </h2>

            <p>By [[post.gsx$author.$t]]</p>

            <p>[[post.gsx$content.$t]]</p>

            <p>Published on: [[post.gsx$date.$t]]</p>

            <small>Keywords: [[post.gsx$keywords.$t]]</small>

            </template>

        </div>

    </template>

    <script>

    Polymer('post-element', {

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

ถัดไป มาสร้างองค์ประกอบบล็อกซึ่งมีทั้งคอลเล็กชันโพสต์และเลย์เอาต์สำหรับบล็อกโดยเรียกใช้ yo polymer:element blog

$ yo polymer:element blog

[?] Would you like to include constructor=''? No

[?] Import to your index.html using HTML imports? Yes

[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html

    create app/elements/blog.html

ครั้งนี้เราจะนำเข้าบล็อกไปยัง index.html โดยใช้การนำเข้า HTML เนื่องจากเราต้องการให้บล็อกปรากฏในหน้าเว็บ สำหรับพรอมต์ที่ 3 โดยเฉพาะ เราจะระบุ post.html เป็นองค์ประกอบที่ต้องการรวมไว้

เช่นเดียวกับก่อนหน้านี้ ระบบจะสร้างไฟล์องค์ประกอบใหม่ (blog.html) และเพิ่มลงใน /elements โดยครั้งนี้จะนำเข้า post.html และรวม <post-element> ไว้ในแท็กเทมเพลต

<link rel="import" href="post.html">

<polymer-element name="blog-element"  attributes="">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

    <span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>

        <post-element></post-element>

    </template>

    <script>

    Polymer('blog-element', {

        //applyAuthorStyles: true,

        //resetStyleInheritance: true,

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

เนื่องจากเราขอให้นำเข้าองค์ประกอบบล็อกโดยใช้การนำเข้า HTML (วิธีรวมและนำเอกสาร HTML มาใช้ซ้ำในเอกสาร HTML อื่นๆ) ไปยังดัชนีของเรา เราจึงสามารถยืนยันได้ว่ามีการเพิ่มองค์ประกอบดังกล่าวลงในเอกสาร <head> อย่างถูกต้อง

<!doctype html>
    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title></title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="styles/main.css">

        <!-- build:js scripts/vendor/modernizr.js -->

        <script src="bower_components/modernizr/modernizr.js"></script>

        <!-- endbuild -->

        <!-- Place your HTML imports here -->

        <link rel="import" href="elements/blog.html">

    </head>

    <body>

        <div class="container">

            <div class="hero-unit" style="width:90%">

                <blog-element></blog-element>

            </div>

        </div>

        <script>
        document.addEventListener('WebComponentsReady', function() {
            // Perform some behaviour
        });
        </script>

        <!-- build:js scripts/vendor.js -->

        <script src="bower_components/polymer/polymer.min.js"></script>

        <!-- endbuild -->

</body>

</html>

เยี่ยมเลย

การเพิ่มทรัพยากร Dependency โดยใช้ Bower

ถัดไป เราจะแก้ไของค์ประกอบเพื่อใช้องค์ประกอบยูทิลิตี Polymer JSONP เพื่ออ่านใน posts.json คุณสามารถรับอะแดปเตอร์ได้โดยการโคลนที่เก็บ Git หรือติดตั้ง polymer-elements ผ่าน Bower โดยเรียกใช้ bower install polymer-elements

ทรัพยากร Dependency ของ Bower

เมื่อมียูทิลิตีแล้ว คุณจะต้องรวมยูทิลิตีดังกล่าวเป็นการนําเข้าในองค์ประกอบ blog.html โดยใช้โค้ดต่อไปนี้

<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">

ถัดไป ให้ใส่แท็กสำหรับคอลัมน์ดังกล่าวและระบุ url ลงในสเปรดชีตบล็อกโพสต์จากก่อนหน้านี้ โดยเพิ่ม &callback= ต่อท้าย ดังนี้

<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>

เมื่อมีข้อมูลนี้แล้ว เราจะเพิ่มเทมเพลตเพื่อทำซ้ำในสเปรดชีตได้เมื่ออ่านข้อมูลแล้ว เอาต์พุตแรกจะแสดงสารบัญพร้อมชื่อที่ลิงก์สำหรับโพสต์ที่ชี้ไปยัง Slug ของโพสต์นั้น

<!-- Table of contents -->

<ul>

    <template repeat="[[post in posts.feed.entry]]">

    <li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>

    </template>

</ul>

ส่วนที่ 2 จะแสดงผลอินสแตนซ์ post-element 1 รายการสำหรับแต่ละรายการที่พบ โดยส่งเนื้อหาโพสต์ไปยังอินสแตนซ์นั้นตามลำดับ โปรดทราบว่าเรากำลังส่งผ่านแอตทริบิวต์ post ซึ่งแสดงเนื้อหาโพสต์สำหรับแถวสเปรดชีตแถวเดียว และแอตทริบิวต์ selected ซึ่งเราจะป้อนข้อมูลด้วยเส้นทาง

<!-- Post content -->

<template repeat="[[post in posts.feed.entry]]">

    <post-element post="[[post]]" selected="[[route]]"></post-element>

</template>

แอตทริบิวต์ repeat ที่คุณเห็นว่ามีการใช้ในเทมเพลตของเราจะสร้างและรักษาอินสแตนซ์ที่มี [[ bindings ]] สำหรับทุกองค์ประกอบในคอลเล็กชันอาร์เรย์ของโพสต์เมื่อมีการระบุ

แอป Polymer

ตอนนี้เพื่อให้เราได้ [[route]] ปัจจุบันที่สร้างขึ้น เราจะโกงและใช้ไลบรารีที่ชื่อว่า Flatiron director ซึ่งจะเชื่อมโยงกับ [[route]] ทุกครั้งที่แฮช URL มีการเปลี่ยนแปลง

โชคดีที่มีองค์ประกอบ Polymer (ส่วนหนึ่งของแพ็กเกจ more-elements) ที่เราสามารถนำมาใช้ได้ เมื่อคัดลอกไปยังไดเรกทอรี /elements แล้ว เราจะอ้างอิงได้ด้วย <flatiron-director route="[[route]]" autoHash></flatiron-director> โดยระบุ route เป็นพร็อพเพอร์ตี้ที่เราต้องการเชื่อมโยงและบอกให้อ่านค่าของการเปลี่ยนแปลงแฮช (autoHash) โดยอัตโนมัติ

เมื่อนำทุกอย่างมารวมกัน เราจะได้ผลลัพธ์ดังนี้

    <link rel="import" href="post.html">

    <link rel="import" href="polymer-jsonp/polymer-jsonp.html">

    <link rel="import" href="flatiron-director/flatiron-director.html">

    <polymer-element name="blog-element"  attributes="">

      <template>

        <style>
          @host { :scope {display: block;} }
        </style>

        <div class="row">

          <h1><a href="/#">My Polymer Blog</a></h1>

          <flatiron-director route="[[route]]" autoHash></flatiron-director>

          <h2>Posts</h2>

          <!-- Table of contents -->

          <ul>

            <template repeat="[[post in posts.feed.entry]]">

              <li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>

            </template>

          </ul>

          <!-- Post content -->

          <template repeat="[[post in posts.feed.entry]]">

            <post-element post="[[post]]" selected="[[route]]"></post-element>

          </template>

        </div>

        <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>

      </template>

      <script>

        Polymer('blog-element', {

          created: function() {},

          enteredView: function() { },

          leftView: function() { },

          attributeChanged: function(attrName, oldVal, newVal) { }

        });

      </script>

    </polymer-element>
แอป Polymer

เย่! ตอนนี้เรามีบล็อกง่ายๆ ที่อ่านข้อมูลจาก JSON และใช้องค์ประกอบ Polymer 2 รายการที่สร้างขึ้นด้วย Yeoman

การทำงานกับองค์ประกอบของบุคคลที่สาม

ระบบนิเวศขององค์ประกอบรอบๆ คอมโพเนนต์เว็บเติบโตขึ้นในช่วงหลังๆ โดยมีเว็บไซต์แกลเลอรีคอมโพเนนต์อย่าง customelements.io เริ่มปรากฏขึ้น เมื่อดูองค์ประกอบที่ชุมชนสร้างขึ้น ฉันพบองค์ประกอบหนึ่งสำหรับการดึงข้อมูลโปรไฟล์ Gravatar และเราสามารถดึงข้อมูลและเพิ่มลงในเว็บไซต์บล็อกของเราได้ด้วย

หน้าแรกขององค์ประกอบที่กำหนดเอง

คัดลอกแหล่งที่มาขององค์ประกอบ Gravatar ไปยังไดเรกทอรี /elements รวมไว้ผ่านการนำเข้า HTML ใน post.html แล้วเพิ่ม ลงในเทมเพลต โดยส่งช่องอีเมลจากสเปรดชีตเป็นแหล่งที่มาของชื่อผู้ใช้ จัดไปเลย

<link rel="import" href="gravatar-element/src/gravatar.html">

<polymer-element name="post-element" attributes="post selected">

    <template>

    <style>
        @host { :scope {display: block;} }
    </style>

        <div class="col-lg-4">

            <template if="[[post.gsx$slug.$t === selected]]">

            <h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>

            <p>By [[post.gsx$author.$t]]</p>

            <gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>

            <p>[[post.gsx$content.$t]]</p>

            <p>[[post.gsx$date.$t]]</p>

            <small>Keywords: [[post.gsx$keywords.$t]]</small>

            </template>

        </div>

    </template>

    <script>

    Polymer('post-element', {

        created: function() { },

        enteredView: function() { },

        leftView: function() { },

        attributeChanged: function(attrName, oldVal, newVal) { }

    });

    </script>

</polymer-element>

มาดูกันว่าเราจะได้อะไรจากข้อมูลนี้บ้าง

แอป Polymer ที่มีองค์ประกอบที่กำหนดเอง

สวยงาม

ในเวลาอันสั้น เราได้สร้างแอปพลิเคชันง่ายๆ ที่ประกอบด้วยคอมโพเนนต์เว็บหลายรายการโดยไม่ต้องกังวลเกี่ยวกับการเขียนโค้ด Boilerplate, การดาวน์โหลดทรัพยากร Dependency ด้วยตนเอง หรือการตั้งค่าเซิร์ฟเวอร์ในเครื่องหรือเวิร์กโฟลว์การสร้าง

การเพิ่มประสิทธิภาพแอปพลิเคชัน

เวิร์กโฟลว์ Yeoman มีโปรเจ็กต์โอเพนซอร์สอีกโปรเจ็กต์หนึ่งที่เรียกว่า Grunt ซึ่งเป็นตัวรันงานที่สามารถเรียกใช้งานเฉพาะบิลด์จำนวนหนึ่ง (กำหนดไว้ใน Gruntfile) เพื่อสร้างแอปพลิเคชันเวอร์ชันที่เพิ่มประสิทธิภาพแล้ว การเรียกใช้ grunt ด้วยตัวเองจะดำเนินการงาน default ที่เครื่องมือสร้างได้ตั้งค่าไว้สำหรับการวิเคราะห์โค้ด การทดสอบ และการสร้าง ดังนี้

grunt.registerTask('default', [

    'jshint',

    'test',

    'build'

]);

งาน jshint ด้านบนจะตรวจสอบกับไฟล์ .jshintrc เพื่อดูค่ากำหนดของคุณ จากนั้นจะเรียกใช้กับไฟล์ JavaScript ทั้งหมดในโปรเจ็กต์ หากต้องการดูตัวเลือกทั้งหมดที่มีใน JSHint โปรดดูเอกสารประกอบ

งาน test จะมีลักษณะดังนี้ และสามารถสร้างและแสดงแอปของคุณสำหรับเฟรมเวิร์กการทดสอบที่เราแนะนำได้ทันที ซึ่งก็คือ Mocha นอกจากนี้ ระบบจะทำการทดสอบให้คุณด้วย ดังนี้

grunt.registerTask('test', [

    'clean:server',

    'createDefaultTemplate',

    'jst',

    'compass',

    'connect:test',

    'mocha'

]);

เนื่องจากแอปของเราในกรณีนี้ค่อนข้างเรียบง่าย เราจึงจะปล่อยให้คุณเขียนการทดสอบเป็นแบบฝึกหัดแยกต่างหาก มีสิ่งอื่นๆ อีก 2-3 อย่างที่เราต้องให้กระบวนการบิลด์จัดการ ดังนั้นมาดูกันว่างาน grunt build ที่กำหนดไว้ใน Gruntfile.js จะทำอะไรบ้าง

grunt.registerTask('build', [

    'clean:dist',    // Clears out your .tmp/ and dist/ folders

    'compass:dist',  // Compiles your Sassiness

    'useminPrepare', // Looks for <!-- special blocks --> in your HTML

    'imagemin',      // Optimizes your images!

    'htmlmin',       // Minifies your HTML files

    'concat',        // Task used to concatenate your JS and CSS

    'cssmin',        // Minifies your CSS files

    'uglify',        // Task used to minify your JS

    'copy',          // Copies files from .tmp/ and app/ into dist/

    'usemin'         // Updates the references in your HTML with the new files

]);

เรียกใช้ grunt build แล้วระบบจะสร้างแอปเวอร์ชันที่พร้อมใช้งานจริงและพร้อมให้คุณจัดส่ง มาลองใช้กันเลย

บิลด์ Grunt

สำเร็จ!

หากติดขัด คุณสามารถดู polymer-blog เวอร์ชันที่สร้างไว้ล่วงหน้าได้ที่ https://github.com/addyosmani/polymer-blog

เรามีอะไรอีกบ้าง

คอมโพเนนต์เว็บยังคงอยู่ในสถานะของการพัฒนา และเครื่องมือที่เกี่ยวข้องก็เช่นกัน

ปัจจุบันเรากำลังพิจารณาวิธีที่นักพัฒนาซอฟต์แวร์อาจใช้เพื่อเชื่อมโยงการนำเข้า HTML เพื่อปรับปรุงประสิทธิภาพการโหลดผ่านโปรเจ็กต์ต่างๆ เช่น Vulcanize (เครื่องมือจากโปรเจ็กต์ Polymer) และวิธีที่ระบบนิเวศสำหรับคอมโพเนนต์อาจทำงานร่วมกับเครื่องมือจัดการแพ็กเกจอย่าง Bower

เราจะแจ้งให้คุณทราบเมื่อมีคำตอบที่ดีกว่าสำหรับคำถามเหล่านี้ แต่ยังมีเรื่องน่าตื่นเต้นอีกมากมายรออยู่ข้างหน้า

การติดตั้ง Polymer แบบสแตนด์อโลนด้วย Bower

หากต้องการเริ่มต้นใช้งาน Polymer แบบเบาๆ คุณสามารถติดตั้งแบบสแตนด์อโลนได้โดยตรงจาก Bower โดยเรียกใช้คำสั่งต่อไปนี้

bower install polymer

ซึ่งจะเพิ่มลงในไดเรกทอรี bower_components จากนั้นคุณสามารถอ้างอิงถึงไฟล์ดังกล่าวในดัชนีแอปพลิเคชันด้วยตนเองและเตรียมพร้อมสำหรับอนาคตได้เลย

คุณมีความคิดเห็นอย่างไร

ตอนนี้คุณทราบวิธีสร้างแอป Polymer โดยใช้คอมโพเนนต์เว็บด้วย Yeoman แล้ว หากคุณมีความคิดเห็นเกี่ยวกับเครื่องมือสร้าง โปรดแจ้งให้เราทราบในความคิดเห็น หรือรายงานข้อบกพร่องหรือโพสต์ไปยัง Issue Tracker ของ Yeoman เราอยากทราบว่ามีสิ่งใดที่คุณต้องการให้เครื่องมือสร้างนี้ทำได้ดีขึ้นหรือไม่ เนื่องจากเราจะปรับปรุงได้ก็ต่อเมื่อคุณใช้งานและแสดงความคิดเห็นเท่านั้น :)