Sveltejs Workshop

This documentation will be used to explain for the Sveltejs Workshop!

Strongly recommend you to take a look at https://github.com/kamranahmedse/developer-roadmap to see the roadmap of our dying exciting programmer life!

Do checkout Sveltejs Tutorials, best-ever tutorial online!

Slides (Or clone this repo and open slides-sveltejs.html!)

📝 Table of Contents

• Front-end framework? For what!
• What is sveltejs?
• Let's get dirty (demo)
• Adding data
• Dynamic attributes
• Styling
• Import and export components!
• Props! Let your parents take control their children!
• A simple counter button!
• Binding data, using range input
• More to explore!

Front-end framework? For what!

The problem that a framework is trying to solve is maintainability and scalability.

Just look into any programming framework (i.e. SvelteJS, Laravel, Django, NestJS), what it is trying to introduce is the convention of programming on a certain field ( Front-end or Back-end ).

We can of course program everything from grown-up, but sooner when we scale the project, it will become more and more unmaintable, and harder to pass down the knowledge.

When it comes to front-end, here is a clue on how can you decide whether do you really need a framework for front-end:

1. Super small scale project: Just a single web page
   • You may use plain HTML & CSS
2. Anything else: Framework

Generally, Front-end framework can be categorized into following:

1. Client-side rendering
2. Server-side rendering

• And of course the brand new hybrid way: Server-generated-client-rendering ( Which is going to be SvelteKit )

What is SvelteJS?

SvelteJS is a client-side rendering framework, you can think of it like your visitor will generate the HTML code on the fly in their machine.

Comparitively, server-side rendering means the HTML code will be generated at the server, and send to your visitor.

You might heard of ReactJS before ( or VueJS ), but there is a significant different between SvelteJS and ReactJS: SvelteJS is a compiler and has no shadow DOM.

What it means is, SvelteJS will compile your code into plain JavaScript, while ReactJS has an "interpreter" that goes through the ReactJS to interprete on the fly ( which resulting to larger bundle size & lower performance )

Let's get dirty (demo)

It's easier to see it in action, let's get started! We will be looking into these modules:

Basic: Create a simple TODO app https://putodo.netlify.app/

1. Adding data
2. Dynamic attributes
3. Styling
4. Import / export
5. Conditional logic / control flow
6. Handling DOM events

Advance 7. Lifecycle 8. Stores 9. Slots