Table Of ContentBeginning
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:Develop websites using the Ractive.js template-driven UI library. This book is project-oriented and simplifies the process of using Ractive.js to create websites or online applications that are interactive by default. It equips you with a starting toolset to develop future projects, safe in the know