Practical Svelte : Create Performant Applications with the Svelte Component Framework

Learn to leverage the power of Svelte to produce web applications that are efficient and fast. This project-oriented book simplifies creating sites using Svelte from start to finish, with little more than a text editor and familiar languages such as HTML, CSS, and JavaScript. It equips you with a starting toolset that you can use to develop future projects, incorporate into your existing workflow, and allow you to take your websites to the next level. Practical Svelte is an excellent resource for getting acquainted with creating and manipulating websites or online applications using a component framework approach. It takes the view that we don’t have to create something complex and unwieldy. We can build something quickly, using less code than some of its competitors, and extend it using the power of the API and plugins over time, without sacrificing speed or features. You will learn how to use the Svelte framework to rapidly create and deploy websites or online applications that are performant, with the minimum of fuss and using existing tools already available in the browser, get up to speed with individual features of the Svelte framework, and work through a series of small projects that will combine to produce a finished site at the end of the book – this to help consolidate skills from day one and create something that you can use as a basis for future projects. What You Will Learn Understand why Svelte’s popularity makes it the go-to framework for constructing applications Learn how to scaffold and implement web sites or online applications using Svelte Create reusable components using Svelte that are interoperable with other frameworks and can solve real-world problems Perform automated testing and deployment using tools such as CI/CD testing Work through some mini projects from start to finish, understanding what we can achieve using Svelte and where we may need to bring other tools into play Who This Book Is For Website developers who are already familiar with JavaScript, CSS, and HTML and are keen to learn how to leverage the Svelte component framework to quickly create web sites or online applications with little more than a text editor. It’s perfect for development teams who do not want to follow the mold and use a credible alternative to React or Angular. Table of Contents 5 About the Author 12 About the Technical Reviewer 13 Acknowledgments 14 Introduction 15 Chapter 1: Getting Started 16 Introducing Svelte 16 Setting Up a Development Environment 17 So How Do We Get Svelte? 18 Creating Your First Application 20 Understanding What Happened 23 What Makes Svelte Different? 24 Browser Support 28 Setting Up Our Project 28 Reviewing the Changes Made 30 Exploring the Structure of Our Site 30 Setting the Background 33 Summary 34 Chapter 2: Creating Components 35 Understanding the Makeup of Components 35 Creating an Example Component 36 Building the Example Component 37 Reviewing the Code 40 Setting Expectations 41 Working Out the Architecture 42 Making a Start with App.svelte 45 Reviewing the Code Changes 47 Setting Up the Component Index 48 Creating the Header 49 Setting Up the Footer 51 Creating the Product Gallery 53 Building the Product Card 55 Reviewing the Code 57 Creating a Button Component 58 Adding the Cart 59 Breaking Apart the Code Used 62 Creating the Remaining Pages 63 File Formats and Svelte – A Note 63 Testing the Initial Site 63 Summary 64 Chapter 3: Managing State and Data 66 Why Is Data So Important in Svelte? 66 Passing and Setting Values in Code 68 Exploring the World of Props 69 Reviewing the Code 71 Making Use of Context in Svelte 72 Breaking Apart the Code 74 Creating and Maintaining Svelte Stores 76 Understanding the Code in Detail 78 Understanding the Differences 79 Adding Functionality to Our Site 81 Adding Props Support 82 Exploring the Changes 84 Adding New Functionality Using Stores 84 Breaking Apart the Code 86 Exploring Alternative Data Sources 87 Summary 89 Chapter 4: Controlling Logic 90 Creating If-Else Conditions 90 Breaking Apart the Code 93 Implementing Each Conditions 94 Exploring the Code 96 Removing the Right Item 97 Breaking Apart the Code in Detail 100 Fetching Content 101 Understanding the Changes Made 105 Exploring Existing Code in the Demo 106 Updating the Shop 107 Adding Login Functionality to Our Site 107 Understanding the Changes 109 Loading Products 110 Exploring the Code in Detail 112 An Epilogue – Improving the Placeholder Message 113 Summary 115 Chapter 5: Managing Events 116 The Theory of Reactivity 116 Choosing from Different Event Types 118 Creating Events 119 Understanding the Changes 121 Modifying Event Handlers 122 Exploring the Changes in Detail 126 Creating Events in Components 127 Forwarding Events 127 Breaking Apart the Changes 129 A Point of Note 130 Life Cycling Events in Svelte 131 Working with onMount 132 Exploring beforeUpdate 135 Understanding How It Works 136 Implementing Actions 137 Reworking the Code 139 Understanding What Happened 140 Adding Functionality to Our Site 141 Adding a Modal 142 Exploring Changes Made to Code 144 Exploring the Examples 144 Using the Plugin – An Epilogue 145 Summary 146 Chapter 6: Binding Elements 148 Creating Forms in Svelte 148 Catering for Different Form Elements 149 Working with Numeric Inputs 149 Using Checkbox Inputs 151 Handling Multiline Text Area Inputs 151 Selecting Choices 152 Dealing with Content Editable Fields 152 Binding and Managing Other Events 153 Building a Composite Example 154 Breaking the Code Apart 158 Managing Context 159 Understanding the Changes 163 Adding a Contact Form to Our Demo 163 Introducing Svelte-Yup 164 Laying the Groundwork 165 Building the Contact Form 166 Understanding the Code in Detail 170 Summary 171 Chapter 7: Adding Styles 172 Making Some Small Adjustments 172 Understanding Styling in Svelte 174 Adding Styling to the Front-End Demo 174 Updating the Global Stylesheet 175 Styling the Pages 177 Styling the Header and Footer 180 Styling the Buttons 181 Styling the Product Pages and Cart 182 Breaking Apart the Code Changes 186 Using a Style Preprocessor 186 Breaking the Code Apart 189 Taking Things Further 190 Summary 192 Chapter 8: Unit Testing and Svelte 193 Deciding Our Strategy 193 Browser Support 195 Setting Up the Test Environment 195 Understanding the Changes Made 198 Creating an Example Test 199 A Note About File Structure 202 Applying Principles to Our Project 202 Writing Tests for the Home Page 203 Breaking Apart the Changes Made 206 Testing the Remaining Content Pages 207 Reviewing the Code in Detail 210 Testing the Product Pages and Cart 211 Exploring the Changes 215 Debugging Svelte 216 Using Lighthouse 219 Summary 221 Chapter 9: Deploying Svelte 222 Doing Final Checks 222 Understanding the Deployment Process 225 Setting Up the Hosting Provider 226 Checking the Default Branch 229 Deploying Content to Production 230 Breaking Apart the Changes 233 Adding a Custom Domain Name 233 Breaking Apart the Code Changes 237 Taking It Further 238 Summary 242 Chapter 10: Working with External Libraries 243 Importing Libraries into Svelte 243 Testing Compatibility with Svelte 245 Exploring the Code in Detail 250 Working Client Side vs. Server Side 251 Why Is Svelte Different? 252 Adding a Payment Processor 252 Getting Prepared 253 Taking a First Look at the PayPal Demo 255 Adding PayPal to Our Front-End Site 257 Testing the Result 261 Reviewing the Changes Made 264 What About React? 265 Breaking Apart the Changes 268 Summary 268 Chapter 11: Animating Svelte 270 Auditing the Site 270 Learning a Language 271 Understanding How the Code Works 276 Reviewing the Types of Animation Options 277 Applying Easing Effects 278 Creating Custom Easing Effects in JavaScript 278 Exploring What Happened 280 Using Styles to Create Custom Easing Effects 281 Taking It Further 283 Using Svelte Libraries 284 Applying Animation to Our Project 285 Adding Animation to the Banner 286 Breaking Apart the Code Changes 287 Updating the Cart Action 287 Understanding the Changes Made 290 Iterating Through Pictures 291 Understanding What Happened 293 Summary 294 Chapter 12: Adapting for Sapper 296 Introducing... Sapper? 296 Migrating Our Project – Setting Expectations 297 Setting Up the Initial Site 298 Exploring the Code in Detail 300 Understanding the Structure of a SvelteKit Site 301 Updating the Layout 302 Understanding the Changes Made 304 Adding Pages 305 Understanding the Changes Made 306 Adding Product Gallery 306 Breaking the Code Apart 308 Adding Product Page 309 Understanding the Changes Made 311 Migrating Styles 312 Breaking Apart the Code 315 Testing the Site and Next Steps 316 Summary 318 Appendix: Getting Help 319 Index 321