หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ปรับปรุงเว็บแอปด้วยเครื่องมือที่ทันสมัย

Addy Osmani

เกริ่นนำ

Allo" ใครๆ ที่เขียนเว็บแอปก็รู้ดีว่าการทำสิ่งต่างๆ ให้ตัวเองสำคัญแค่ไหน คุณจะเผชิญกับความท้าทายเมื่อต้องกังวลเกี่ยวกับงานที่น่าเบื่อ เช่น การค้นหาต้นแบบที่เหมาะสม การตั้งค่าเวิร์กโฟลว์การพัฒนาและทดสอบ ตลอดจนการลดขนาดและบีบอัดแหล่งที่มาทั้งหมด

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

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

Yeoman เป็นผู้ชายใส่หมวกและมีเครื่องมือ 3 อย่างที่จะช่วยเพิ่มประสิทธิภาพการทำงานของคุณ

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

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

คุณสามารถติดตั้งโปรแกรมสร้างจาก Node Packaged Modules (npm) ซึ่งตอนนี้มีโปรแกรมสร้างกว่า 220 รายการ ซึ่งส่วนใหญ่เขียนขึ้นโดยชุมชนโอเพนซอร์ส เครื่องกำเนิดไฟฟ้ายอดนิยม ได้แก่ เครื่องกำเนิดไฟฟ้าเชิงมุม เครื่องกำเนิดไฟฟ้ากระดูกสันหลัง และเครื่องกำเนิดไฟฟ้า

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

$ npm install -g yo

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

เครื่องกำเนิดโพลิเมอร์

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

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

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

$ npm install generator-polymer -g

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

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

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

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

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

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

$ yo polymer

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

เอาล่ะ ต่อไปเราสามารถเรียกใช้ grunt server เพื่อดูตัวอย่างว่าแอปมีลักษณะอย่างไร

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

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

$ yo polymer:element post

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

หมายเหตุ: หากเราตอบว่า "ใช่" สำหรับคำถามที่ 2 เครื่องมือสร้างจะนำเข้า post.html และรวมไว้ใน index.html และยังประกาศ <post-element> เพื่อให้องค์ประกอบแสดงผลเมื่อโหลดหน้าเว็บ

$ 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>

ประกอบด้วย

โค้ด Boilerplate สำหรับองค์ประกอบที่กำหนดเอง ซึ่งทำให้คุณใช้ประเภทองค์ประกอบ DOM ที่กำหนดเองในหน้าเว็บได้ (เช่น <post-element>)
แท็กเทมเพลตสําหรับเทมเพลตฝั่งไคลเอ็นต์ "เนทีฟ" และตัวอย่างสไตล์ที่กําหนดขอบเขตสําหรับการรวมรูปแบบขององค์ประกอบ
ต้นแบบการลงทะเบียนและเหตุการณ์ในวงจร

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

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

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

เปิดสเปรดชีต Google เอกสารนี้ในเบราว์เซอร์ (สำหรับขั้นตอนเหล่านี้ ขอแนะนำให้ใช้ Chrome) โดยมีตัวอย่างข้อมูลโพสต์ในช่องต่อไปนี้
- ID
- ชื่อ
- ผู้เขียน
- เนื้อหา
- วันที่
- คีย์เวิร์ด
- อีเมล (ของผู้เขียน)
- Slug (สำหรับ URL ทากของโพสต์)
ไปที่เมนูไฟล์ และเลือกทำสำเนาเพื่อสร้างสำเนาของสเปรดชีตของคุณเอง คุณแก้ไขเนื้อหาได้ตามต้องการ หรือเพิ่มหรือนำโพสต์ออก
ไปที่เมนูไฟล์อีกครั้งและเลือกเผยแพร่ไปยังเว็บ
คลิกเริ่มต้นการเผยแพร่
ในส่วนรับลิงก์ไปยังข้อมูลที่เผยแพร่ ให้คัดลอกส่วนคีย์ของ URL ที่ระบุจากกล่องข้อความสุดท้าย ซึ่งจะมีลักษณะดังนี้ https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
วางคีย์ใน 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
คุณสามารถวาง URL ลงในเบราว์เซอร์และไปที่ URL นั้นเพื่อดูเนื้อหาบล็อกในรูปแบบ JSON ให้จด URL ไว้และใช้เวลาเล็กน้อยในการตรวจสอบรูปแบบของข้อมูลนี้ เนื่องจากคุณจะต้องทำซ้ำข้อมูลดังกล่าวเพื่อแสดงบนหน้าจอในภายหลัง

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

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

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

<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 คุณรับอะแดปเตอร์ได้โดยการโคลนที่เก็บ หรือติดตั้ง polymer-elements ผ่าน Bower โดยเรียกใช้ bower install polymer-elements

เมื่อคุณมียูทิลิตีแล้ว คุณจะต้องรวมยูทิลิตีเป็นการนำเข้าในองค์ประกอบ 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>

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

<!-- 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 ที่แสดงเนื้อหาของโพสต์สำหรับแถวสเปรดชีต 1 แถวและแอตทริบิวต์ selected ซึ่งเราจะสร้างเส้นทาง

<!-- Post content -->

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

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

</template>

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

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

โชคดีที่เรามีองค์ประกอบ Polymer (เป็นส่วนหนึ่งของแพ็กเกจองค์ประกอบเพิ่มเติม) ที่ให้เราช่วยคุณได้ เมื่อคัดลอกไปยังไดเรกทอรี /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>

เย่! ตอนนี้เรามีบล็อกแบบง่ายๆ ที่อ่านข้อมูลจาก 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>

เรามาดูกันว่าสิ่งนี้ทำให้เราได้ประโยชน์อะไรบ้าง

สวยมาก!

ภายในเวลาอันสั้น เราได้สร้างแอปพลิเคชันแบบง่ายที่ประกอบด้วยคอมโพเนนต์ต่างๆ ของเว็บโดยไม่ต้องกังวลกับการเขียนโค้ดต้นแบบ ดาวน์โหลดทรัพยากร 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 และควรสร้างแอปเวอร์ชันที่พร้อมใช้งานจริงและพร้อมให้คุณจัดส่ง มาลองกันเลย

สำเร็จ!

หากพบปัญหา ก็ลองดูบล็อก Polymer-blog ที่สร้างไว้ล่วงหน้าได้ที่ https://github.com/addyosmani/polymer-blog

เรายังมีอะไรอีกมากมายรอคุณอยู่

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

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

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

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

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

bower install polymer

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

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

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