We may earn an affiliate commission when you visit our partners.
Course image
Basar Buyukkahraman

The frontend world is having very popular frameworks which are heavily used in most of the applications. Svelte is joining this competition by bringing lots of cool, developer friendly features. After practicing svelte, it will be hard to go back and work with other frameworks. You will be amazed when you see how much you can do with less code.

Read more

The frontend world is having very popular frameworks which are heavily used in most of the applications. Svelte is joining this competition by bringing lots of cool, developer friendly features. After practicing svelte, it will be hard to go back and work with other frameworks. You will be amazed when you see how much you can do with less code.

In this course we will be learning Svelte by creating a web application with it. Also we will apply test driven development (TDD) methodology from beginning to the end.

We will use one of the most popular test libraries of javascript. jest and testing-library

while building this application, we will learn

  • client-side routing. we will apply our custom implementation then we will use svelte-routing library

  • internationalization

  • global state management in a component based application

and we will see

  • how test driven development works.

  • how it's affecting our code quality, reusability

  • how it's giving us the confidence about refactoring our implementation

  • how to avoid implementation details while creating tests

This course is purely built on practice. Each code piece we write, will be for our actual application implementation.

In each section we will gradually build our application. We will not jump ahead and add functionality not needed for that moment. We will implement one requirement at a time. Each implementation will bring the next requirement to us.

And following this practice, will help you to get a solid foundation about overall web application requirements and how to implement one of them with Svelte by following test driven development methodology.

After completing the course, you will be able to use Svelte in your next project and you will experience the benefits of test driven development.

Enroll now

What's inside

Learning objectives

  • Build application with svelte 3
  • Build an application with internationalization (i18n)
  • Build an application with client side routing
  • Store, actions, reactive declarations and many more features of svelte
  • Practice test driven development in a complete project from beginning to the end.
  • Learn the test runner, jest and understand how to structure test modules
  • How to mock external dependencies in testing.
  • Feel how the test driven development is giving confidence when refactoring your application.

Syllabus

Introduction
Methodology
Create Project
Running the App
Read more
Test Dependency Configuration Warning
Test Environment Setup
Development Environment Tools
Project Source Code

If you see an issue with npm install for backend.zip you can try backend-without-db.zip which requires minimal dependencies.

Sign Up
Sign Up Form Layout
Interacting with Form
Dependency Warning for Axios
Making API Request
Mock Service Worker Update
Mocking
Proxying Requests to Backend
Styling
Actions
Progress Indicator
Sign Up Success Layout
Refactor Tests
Fix Test Order Problem
Validation
Display Validation Error
Restoring Button State
Input Component
Styling Input
Remaining Validations
Client-side Validation
Hiding Validation Errors
Refactor
Default Profile Image
i18n - Internationalization
Internationalization - i18n
i18n Library
Changing Language
Language Selector Component
Local Validation Messages
Adding Language to API Requests
Routing
Client-side Routing
NavBar
Styling NavBar
Declerative Routing
Svelte Routing Library
Account Activation Page
Account Activation API Request
Spinner Component
Listing Users and User Page
Keyed Each
UserList
Refactor Page Responses in Tests
Next and Previous in UserList
Link to UserPage
UserList Progress Indicator
Translations
ProfileCard Component
UserPage Progress Indicator
User Not Found Case
Authentication
Storing Credentials
Login Form
Interactions
Authentication Request to Backend
Authentication Errors
Navigation After Successful Authentication
ButtonWithProgress Component
Card Component
Client State Management
Logged in Layout
NavBar Component
Using LocalStorage
LocalStorage Abstraction
Svelte Store Practice
LocalStorage Encryption

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Examines popular frameworks used in most frontend applications, such as Svelte, highlighting its developer-friendly features and potential benefits
Develops practical skills in building a web application with Svelte from start to finish, emphasizing test-driven development (TDD)
Emphasizes internationalization (i18n) techniques, allowing learners to create multilingual applications that cater to users from diverse backgrounds
Introduces client-side routing, enabling learners to create applications with dynamic page navigation and single-page app (SPA) functionality
Utilises Jest and testing-library, popular JavaScript testing frameworks, to demonstrate the principles and benefits of TDD throughout the course
Provides practical experience in managing global state within a component-based application, ensuring data consistency and efficient state handling

Save this course

Save Svelte with Test Driven Development to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Svelte with Test Driven Development with these activities:
Review CSS Fundamentals
Ensure a solid foundation in CSS to effectively style your Svelte applications.
Browse courses on CSS
Show steps
  • Review core CSS concepts
  • Practice writing CSS rules
Tutor a Beginner in Svelte
Reinforce your knowledge by guiding a beginner through their Svelte journey.
Show steps
  • Find a beginner who needs help with Svelte
  • Provide one-on-one support and guidance
  • Share resources and best practices
Explore the Svelte Kitchen Sink
Gain hands-on experience with Svelte by following guided tutorials and experimenting with the Kitchen Sink.
Show steps
  • Start the Svelte Kitchen Sink
  • Explore the component gallery
  • Try out different Svelte features
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a Tic-Tac-Toe Game in Svelte
Practice Svelte's core concepts by building a simple but engaging game.
Browse courses on Tic-Tac-Toe
Show steps
  • Create a new Svelte project for the game
  • Implement the game logic
  • Design the game's user interface
  • Test the game's functionality
Create a To Do List App in Svelte with Jest
Reinforce your understanding of Svelte by developing a real-world application and testing it with Jest.
Show steps
  • Set up a new Svelte project
  • Create a simple to-do list interface
  • Implement Jest for testing
  • Write tests for the to-do list functionality
Design a Svelte Component Library
Deepen your understanding of Svelte by creating a reusable component library that solves a specific problem.
Browse courses on Component Library
Show steps
  • Identify a problem that can be solved with reusable Svelte components
  • Design the components and their functionality
  • Develop and test the component library
  • Document and share your library
Participate in a Svelte Hackathon
Challenge yourself and apply your Svelte skills in a competitive environment.
Show steps
  • Find an upcoming Svelte hackathon
  • Form a team or work solo
  • Develop a Svelte-based project within the hackathon's timeframe
  • Present your project and compete for prizes

Career center

Learners who complete Svelte with Test Driven Development will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Svelte with Test Driven Development.
Svelte & SvelteKit: The Complete Guide
Most relevant
SvelteKit Framework by Example: Full-Stack Ecommerce...
Most relevant
Test Driven Development in C# 8
Software Engineering: Implementation and Testing
Master Svelte Framework - The Complete Course
Get Started with Cloud Native, DevOps, Agile, and NoSQL
Use Python Unit Test to Demonstrate TDD
Learn Test Driven Development in Java
Svelte and Firebase - The Complete Guide (2023)
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser