Beginning Ractive.js A Practical Introduction to Ractive.js using Real-World Examples — Alex Libby Beginning Ractive.js A Practical Introduction to Ractive.js using Real-World Examples Alex Libby Beginning Ractive.js Alex Libby Rugby, Warwickshire, United Kingdom ISBN-13 (pbk): 978-1-4842-3092-3 ISBN-13 (electronic): 978-1-4842-3093-0 https://doi.org/10.1007/978-1-4842-3093-0 Library of Congress Control Number: 2017962046 Copyright © 2017 by Alex Libby This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director: Welmoed Spahr Editorial Director: Todd Green Acquisitions Editor: Louise Corrigan Development Editor: James Markham Technical Reviewer: Phil Nash Coordinating Editor: Nancy Chen Copy Editor: Karen Jameson Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit http://www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484230923. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper This is dedicated to my family, with thanks for their love and support whilst writing this book Contents About the Author �����������������������������������������������������������������������������������������������������xv About the Technical Reviewer �������������������������������������������������������������������������������xvii Acknowledgments ��������������������������������������������������������������������������������������������������xix Introduction ������������������������������������������������������������������������������������������������������������xxi ■ Part I: Getting Started �������������������������������������������������������������������������1 ■ Chapter 1: Getting Started with Ractive ����������������������������������������������������������������3 Introducing Ractive ����������������������������������������������������������������������������������������������������������3 Creating a Project Folder ��������������������������������������������������������������������������������������������������4 Downloading and Installing Ractive ���������������������������������������������������������������������������������5 Compiling Using Node�js���������������������������������������������������������������������������������������������������5 Installing Node�js ������������������������������������������������������������������������������������������������������������������������������������6 Configuring Node�js for Use with Ractive �����������������������������������������������������������������������������������������������6 Creating Our First Demo ���������������������������������������������������������������������������������������������������8 Compiling Code Using Node�js ��������������������������������������������������������������������������������������������������������������10 Taking It Further �����������������������������������������������������������������������������������������������������������������������������������12 Exploring Our Node Demo in Detail ������������������������������������������������������������������������������������������������������14 Understanding How Ractive Works ��������������������������������������������������������������������������������15 Defining Our Configuration Options ��������������������������������������������������������������������������������17 Data ������������������������������������������������������������������������������������������������������������������������������������������������������17 Placement ���������������������������������������������������������������������������������������������������������������������������������������������17 Binding �������������������������������������������������������������������������������������������������������������������������������������������������18 Parsing��������������������������������������������������������������������������������������������������������������������������������������������������18 Templating ��������������������������������������������������������������������������������������������������������������������������������������������18 v ■ Contents Transitions ��������������������������������������������������������������������������������������������������������������������������������������������19 Setting Default Options �������������������������������������������������������������������������������������������������������������������������20 Setting Advanced Configuration Options ����������������������������������������������������������������������������������������������20 Getting Support ��������������������������������������������������������������������������������������������������������������21 Summary ������������������������������������������������������������������������������������������������������������������������22 ■ Chapter 2: Creating Templates ����������������������������������������������������������������������������23 Understanding the Parallel DOM ������������������������������������������������������������������������������������23 Creating Templates ���������������������������������������������������������������������������������������������������������24 Adding Elements and Decorators �����������������������������������������������������������������������������������25 Styling Elements Using Ractive ������������������������������������������������������������������������������������������������������������26 Improving Our Code ������������������������������������������������������������������������������������������������������������������������������28 Understanding Mustaches� ���������������������������������������������������������������������������������������������30 Working with References �����������������������������������������������������������������������������������������������32 Resolving References ���������������������������������������������������������������������������������������������������������������������������33 Using Special or Restricted References �����������������������������������������������������������������������������������������������34 Interacting with Ractive Instances Using Keypaths �������������������������������������������������������36 Applying Logic with Expressions ������������������������������������������������������������������������������������37 Introducing Copenhagen�����������������������������������������������������������������������������������������������������������������������38 Exploring What Happened���������������������������������������������������������������������������������������������������������������������40 Taking It Further �����������������������������������������������������������������������������������������������������������������������������������40 Incorporating External Libraries and Expressions ��������������������������������������������������������������������������������42 Setting Time Zones in Ractive ��������������������������������������������������������������������������������������������������������������42 Understanding Our Demo in More Detail ����������������������������������������������������������������������������������������������44 Creating Partials �������������������������������������������������������������������������������������������������������������45 Introducing Our Gallery �������������������������������������������������������������������������������������������������������������������������45 Exploring What Happened���������������������������������������������������������������������������������������������������������������������48 Summary ������������������������������������������������������������������������������������������������������������������������50 vi ■ Contents ■ Part II: In More Detail �����������������������������������������������������������������������51 ■ Chapter 3: Binding Data���������������������������������������������������������������������������������������53 Managing Data-Binding in Ractive ���������������������������������������������������������������������������������53 Understanding the Principles ���������������������������������������������������������������������������������������������������������������55 Managing Dependencies ������������������������������������������������������������������������������������������������57 Managing Indirect Dependencies ���������������������������������������������������������������������������������������������������������59 Working with Computed Properties ��������������������������������������������������������������������������������61 Calculating Volume of a Fish Tank ��������������������������������������������������������������������������������������������������������61 Improving Our Code ������������������������������������������������������������������������������������������������������������������������������63 Observing Changes in Ractive ����������������������������������������������������������������������������������������63 Understanding the API Methods �����������������������������������������������������������������������������������������������������������64 Observing Changes in Action ����������������������������������������������������������������������������������������������������������������64 Observing Patterns �������������������������������������������������������������������������������������������������������������������������������67 Interacting with Other Libraries Using Adaptors ������������������������������������������������������������69 Understanding the Architecture of an Adaptor �������������������������������������������������������������������������������������70 Exploring the Limitations of Adaptors ���������������������������������������������������������������������������������������������������71 Dissecting an Adaptor in the Wild ���������������������������������������������������������������������������������������������������������72 Creating an Adaptor ������������������������������������������������������������������������������������������������������������������������������73 Building the Demo ��������������������������������������������������������������������������������������������������������������������������������74 Registering and Using Our Adaptor ������������������������������������������������������������������������������������������������������78 Using Our Adaptor ���������������������������������������������������������������������������������������������������������������������������������79 Exploring How the Adaptor Works ��������������������������������������������������������������������������������������������������������80 Creating Our Adaptor – an Epilogue �����������������������������������������������������������������������������������������������������81 Summary ������������������������������������������������������������������������������������������������������������������������82 ■ Chapter 4: Handling Events ���������������������������������������������������������������������������������83 Publishing and Subscribing to Events ����������������������������������������������������������������������������83 Getting Acquainted with Events �������������������������������������������������������������������������������������83 Amending Our Demo ������������������������������������������������������������������������������������������������������85 vii ■ Contents Handling Different Event Types ��������������������������������������������������������������������������������������87 Publishing Directly ��������������������������������������������������������������������������������������������������������������������������������87 Lifecycling Events ���������������������������������������������������������������������������������������������������������������������������������87 Proxy Syntax �����������������������������������������������������������������������������������������������������������������������������������������88 Expression Syntax ��������������������������������������������������������������������������������������������������������������������������������89 Setting Event Context �����������������������������������������������������������������������������������������������������91 Using Wildcards in Events ����������������������������������������������������������������������������������������������92 Creating Namespaced Events ����������������������������������������������������������������������������������������93 Exploring What Happened���������������������������������������������������������������������������������������������������������������������95 Managing Event Propagation �����������������������������������������������������������������������������������������95 Building Our Demo ��������������������������������������������������������������������������������������������������������������������������������96 Dissecting an Event Plugin ���������������������������������������������������������������������������������������������98 Creating Custom Events �����������������������������������������������������������������������������������������������101 Exploring the Plugin Architecture �������������������������������������������������������������������������������������������������������101 Writing Our Plugin �������������������������������������������������������������������������������������������������������������������������������102 Registering Custom Events ������������������������������������������������������������������������������������������104 Making Use of Our Custom Event ���������������������������������������������������������������������������������104 Summary ����������������������������������������������������������������������������������������������������������������������107 ■ Chapter 5: Animating Content ���������������������������������������������������������������������������109 Making Content Move ��������������������������������������������������������������������������������������������������109 Creating Transitions with Ractive ���������������������������������������������������������������������������������109 Exploring the Theory Behind Transitions ��������������������������������������������������������������������������������������������111 Adding Easing Effects �������������������������������������������������������������������������������������������������������������������������112 Chaining Promises in Ractive ���������������������������������������������������������������������������������������113 Chaining Multiple Transitions with Ractive �����������������������������������������������������������������������������������������114 Making a Promise �������������������������������������������������������������������������������������������������������������������������������117 Comparing with CSS ����������������������������������������������������������������������������������������������������118 Exploring the Transition API ������������������������������������������������������������������������������������������119 viii ■ Contents Creating Transition Plugins �������������������������������������������������������������������������������������������119 Exploring a Plugin in the Wild �������������������������������������������������������������������������������������������������������������120 Creating Our Own Plugin ��������������������������������������������������������������������������������������������������������������������123 Registering Transitions �����������������������������������������������������������������������������������������������������������������������125 Exploring What Happened�������������������������������������������������������������������������������������������������������������������126 Creating and Using Animation ��������������������������������������������������������������������������������������128 Displaying Average Temperatures for Copenhagen ����������������������������������������������������������������������������130 Understanding How Our Demo Works ������������������������������������������������������������������������������������������������134 Working with External Plugins �������������������������������������������������������������������������������������135 Easing Content on Pages ����������������������������������������������������������������������������������������������136 Registering an Easing �������������������������������������������������������������������������������������������������������������������������137 Using our Easing Plugin ���������������������������������������������������������������������������������������������������������������������137 Summary ����������������������������������������������������������������������������������������������������������������������138 ■ Chapter 6: Creating Components �����������������������������������������������������������������������139 Initializing Our Component �������������������������������������������������������������������������������������������139 Why Create Components? ������������������������������������������������������������������������������������������������������������������140 Working Through a Simple Example ����������������������������������������������������������������������������141 Exploring How Our Component Works ������������������������������������������������������������������������������������������������144 Managing Data Binding ������������������������������������������������������������������������������������������������145 Mapping Our Data �������������������������������������������������������������������������������������������������������������������������������145 Maintaining Data Context �������������������������������������������������������������������������������������������������������������������146 Isolating Content ���������������������������������������������������������������������������������������������������������������������������������148 Rendering Content in Context �������������������������������������������������������������������������������������������������������������149 Registering and Using Our Component ������������������������������������������������������������������������150 Taking It to the Next Level ��������������������������������������������������������������������������������������������152 Understanding How It All Worked �������������������������������������������������������������������������������������������������������155 Using Pre-Built Components ����������������������������������������������������������������������������������������156 Taking Care of Events ���������������������������������������������������������������������������������������������������157 Managing Event Propagation in Components �������������������������������������������������������������������������������������157 Stopping Event Propagation ���������������������������������������������������������������������������������������������������������������158 ix ■ Contents Working with Third-Party Libraries�������������������������������������������������������������������������������159 Summary ����������������������������������������������������������������������������������������������������������������������160 ■ Chapter 7: Building Plugins �������������������������������������������������������������������������������161 The Plugin Types So Far �����������������������������������������������������������������������������������������������161 Working with Decorators ����������������������������������������������������������������������������������������������162 Writing Our First Decorator Plugin �������������������������������������������������������������������������������162 Styling Our Plugin �������������������������������������������������������������������������������������������������������������������������������165 Registering and Using Our Decorator �������������������������������������������������������������������������������������������������166 Exploring What Happened�������������������������������������������������������������������������������������������������������������������168 Making It Available for Others ��������������������������������������������������������������������������������������169 Using the Plugin Template for Grunt ���������������������������������������������������������������������������������������������������169 Using a Template – an Epilogue ���������������������������������������������������������������������������������������������������������175 Creating Interpolator Plugins ����������������������������������������������������������������������������������������176 Switching Colors with an Interpolator Plugin �������������������������������������������������������������������������������������176 Registering and Using Interpolator Plugins ����������������������������������������������������������������������������������������178 Working Through Our Demo ���������������������������������������������������������������������������������������������������������������179 Creating Partials �����������������������������������������������������������������������������������������������������������180 Registering and Using Partials �����������������������������������������������������������������������������������������������������������182 Summary ����������������������������������������������������������������������������������������������������������������������183 ■ Part III: Putting Ractive to Use �������������������������������������������������������185 ■ Chapter 8: Using Ractive �����������������������������������������������������������������������������������187 Manipulating SVG Images with Ractive ������������������������������������������������������������������������187 Creating Our Filter ��������������������������������������������������������������������������������������������������������187 Applying Our Filter to an Image ����������������������������������������������������������������������������������������������������������188 Understanding How Our Filter Works ��������������������������������������������������������������������������������������������������191 Applying Semantic UI Themes ��������������������������������������������������������������������������������������192 Applying Semantic UI Manually ����������������������������������������������������������������������������������������������������������192 Creating a Component ������������������������������������������������������������������������������������������������������������������������194 x
Description: