Practical Svelte: Create Performant Applications with the Svelte Component Framework

Description

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 applicationsLearn how to scaffold and implement web sites or online applications using SvelteCreate reusable components using Svelte that are interoperable with other frameworks and can solve real-world problemsPerform 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 About the Author About the Technical Reviewer Acknowledgments Introduction Chapter 1: Getting Started Introducing Svelte Setting Up a Development Environment So How Do We Get Svelte? Creating Your First Application Understanding What Happened What Makes Svelte Different? Browser Support Setting Up Our Project Reviewing the Changes Made Exploring the Structure of Our Site Setting the Background Summary Chapter 2: Creating Components Understanding the Makeup of Components Creating an Example Component Building the Example Component Reviewing the Code Setting Expectations Working Out the Architecture Making a Start with App.svelte Reviewing the Code Changes Setting Up the Component Index Creating the Header Setting Up the Footer Creating the Product Gallery Building the Product Card Reviewing the Code Creating a Button Component Adding the Cart Breaking Apart the Code Used Creating the Remaining Pages File Formats and Svelte – A Note Testing the Initial Site Summary Chapter 3: Managing State and Data Why Is Data So Important in Svelte? Passing and Setting Values in Code Exploring the World of Props Reviewing the Code Making Use of Context in Svelte Breaking Apart the Code Creating and Maintaining Svelte Stores Understanding the Code in Detail Understanding the Differences Adding Functionality to Our Site Adding Props Support Exploring the Changes Adding New Functionality Using Stores Breaking Apart the Code Exploring Alternative Data Sources Summary Chapter 4: Controlling Logic Creating If-Else Conditions Breaking Apart the Code Implementing Each Conditions Exploring the Code Removing the Right Item Breaking Apart the Code in Detail Fetching Content Understanding the Changes Made Exploring Existing Code in the Demo Updating the Shop Adding Login Functionality to Our Site Understanding the Changes Loading Products Exploring the Code in Detail An Epilogue – Improving the Placeholder Message Summary Chapter 5: Managing Events The Theory of Reactivity Choosing from Different Event Types Creating Events Understanding the Changes Modifying Event Handlers Exploring the Changes in Detail Creating Events in Components Forwarding Events Breaking Apart the Changes A Point of Note Life Cycling Events in Svelte Working with onMount Exploring beforeUpdate Understanding How It Works Implementing Actions Reworking the Code Understanding What Happened Adding Functionality to Our Site Adding a Modal Exploring Changes Made to Code Exploring the Examples Using the Plugin – An Epilogue Summary Chapter 6: Binding Elements Creating Forms in Svelte Catering for Different Form Elements Working with Numeric Inputs Using Checkbox Inputs Handling Multiline Text Area Inputs Selecting Choices Dealing with Content Editable Fields Binding and Managing Other Events Building a Composite Example Breaking the Code Apart Managing Context Understanding the Changes Adding a Contact Form to Our Demo Introducing Svelte-Yup Laying the Groundwork Building the Contact Form Understanding the Code in Detail Summary Chapter 7: Adding Styles Making Some Small Adjustments Understanding Styling in Svelte Adding Styling to the Front-End Demo Updating the Global Stylesheet Styling the Pages Styling the Header and Footer Styling the Buttons Styling the Product Pages and Cart Breaking Apart the Code Changes Using a Style Preprocessor Breaking the Code Apart Taking Things Further Summary Chapter 8: Unit Testing and Svelte Deciding Our Strategy Browser Support Setting Up the Test Environment Understanding the Changes Made Creating an Example Test A Note About File Structure Applying Principles to Our Project Writing Tests for the Home Page Breaking Apart the Changes Made Testing the Remaining Content Pages Reviewing the Code in Detail Testing the Product Pages and Cart Exploring the Changes Debugging Svelte Using Lighthouse Summary Chapter 9: Deploying Svelte Doing Final Checks Understanding the Deployment Process Setting Up the Hosting Provider Checking the Default Branch Deploying Content to Production Breaking Apart the Changes Adding a Custom Domain Name Breaking Apart the Code Changes Taking It Further Summary Chapter 10: Working with External Libraries Importing Libraries into Svelte Testing Compatibility with Svelte Exploring the Code in Detail Working Client Side vs. Server Side Why Is Svelte Different? Adding a Payment Processor Getting Prepared Taking a First Look at the PayPal Demo Adding PayPal to Our Front-End Site Testing the Result Reviewing the Changes Made What About React? Breaking Apart the Changes Summary Chapter 11: Animating Svelte Auditing the Site Learning a Language Understanding How the Code Works Reviewing the Types of Animation Options Applying Easing Effects Creating Custom Easing Effects in JavaScript Exploring What Happened Using Styles to Create Custom Easing Effects Taking It Further Using Svelte Libraries Applying Animation to Our Project Adding Animation to the Banner Breaking Apart the Code Changes Updating the Cart Action Understanding the Changes Made Iterating Through Pictures Understanding What Happened Summary Chapter 12: Adapting for Sapper Introducing... Sapper? Migrating Our Project – Setting Expectations Setting Up the Initial Site Exploring the Code in Detail Understanding the Structure of a SvelteKit Site Updating the Layout Understanding the Changes Made Adding Pages Understanding the Changes Made Adding Product Gallery Breaking the Code Apart Adding Product Page Understanding the Changes Made Migrating Styles Breaking Apart the Code Testing the Site and Next Steps Summary Appendix: Getting Help Index