Introduction to Svelte - Mmt tech meetup - September 2020
•Download as PPTX, PDF•
0 likes•108 views
Introduction to Svelte and how it could be used. Also how you can get started with Svelte and Sapper. Also example of the Svelte API and key takeaways
Recommended
More Related Content
Similar to Introduction to Svelte - Mmt tech meetup - September 2020
Similar to Introduction to Svelte - Mmt tech meetup - September 2020 (20)
More from Ilesh Mistry
More from Ilesh Mistry (11)
Recently uploaded
Recently uploaded (20)
Introduction to Svelte - Mmt tech meetup - September 2020
- 1. MMT TECH MEET-UP We will be starting in about 5 mins…
- 2. MMT TECH MEET-UP – SEPT 2020
- 3. WHO I’M I? 3 ILESH MISTRY (CMS SPECIALIST & KONTENT MVP) @ileshmistry MMT Tech Meet-up MMT Tech Meet-up @ileshmistry | #MMT_TechMeetup CONTACT ILESH
- 4. WHO IS MMT? 4 @ileshmistry | #MMT_TechMeetup CONTACT ILESH Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up CONTACT MMTHELPING CLIENTS BUILD DIGITAL PRODUCTS THAT TRANSFORM BUSINESS PERFORMANCE
- 5. MMT TECH MEET-UPS 5 @ileshmistry | #MMT_TechMeetup MMT Tech Meet-up • Front end driven topics • Want to talk at a future meet-up? • Do you know someone who would be good? • Speak to Ilesh MMT Tech Meet-up
- 6. BEFORE WE GET STARTED 6 • Add your questions in the chat • We will be recording the sessions • Please share on social media (#MMT_TechMeetup | @IleshMistry | @Sveltejs) @ileshmistry | #MMT_TechMeetup MMT Tech Meet-up MMT Tech Meet-up
- 7. TODAY’S AGENDA • Introduction to Svelte – Ilesh Mistry (@IleshMistry) • Looking into the Svelte compiler – Tan Li Hau (@LiHauTan) • How I built a Sapper blog with all the must-have features – Markus Hatvan (@HatvanMarkus) • Sapper JAMstack – Trello as a blog backend – Shriji Kondan (@Shriji) 7 @ileshmistry | #MMT_TechMeetup MMT Tech Meet-up MMT Tech Meet-up
- 9. WHO I’M I? 9 @ileshmistry | #MMT_TechMeetup CONTACT ILESH Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up ILESH MISTRY (CMS SPECIALIST & KONTENT MVP) @ileshmistry
- 10. WHATARE YOU GOING TO BE COVERING? 10 • What is Svelte? • How to get started? • Svelte Examples • Quick demo of sourcing data from a Headless CMS • Svelte takeaways Introduction to Svelte @ileshmistry | #MMT_TechMeetupIntroduction to Svelte - MMT Tech Meet-up
- 11. WHAT IS SVELTE? 11 @ileshmistry | #MMT_TechMeetup • JavaScript cybernetically enhanced web apps development. Similar compared to component frameworks (React, Vue) • Generally write less code compared to the other frameworks Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up
- 12. WHAT IS SVELTE? 12 @ileshmistry | #MMT_TechMeetup Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up React Vue Svelte Example Component https://svelte.dev/blog/write-less-code
- 13. WHAT IS SVELTE? 13 @ileshmistry | #MMT_TechMeetup • Tool for building fast web applications • Build time not run time so it’s starts the applications faster / No virtual DOM • No complex state management – truly reactive • Open sourced and written by Rich Harris • Powers Sapper application framework (more information later) Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up
- 14. HOW TO GET STARTED? 14 @ileshmistry | #MMT_TechMeetup • Tutorial on their website is a great starting point 🙌 • Have a play with their website Examples, great way to try things out – CodePen style! • Discord chatroom to ask questions • Join the Svelte Summit Oct 18th 2020 • Get involved in meet-ups and event like this Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up
- 15. SVELTE EXAMPLES 15 @ileshmistry | #MMT_TechMeetup Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up
- 16. SOURCING FROM A HEADLESS CMS 16 @ileshmistry | #MMT_TechMeetup Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up • Headless CMS - Kontent • Working from a sample template
- 17. SOURCING FROM A HEADLESS CMS 17 @ileshmistry | #MMT_TechMeetup Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up
- 18. SVELTE TAKEAWAYS 18 @ileshmistry | #MMT_TechMeetup • Less code to write • Better application performance as you are building the code before run time • Therefore better application first load • Community driven • Easy to learn, get started and build your own small Svelte Sapper app • Ask questions - Discord chatroom • Can easily use a Headless CMS as the data source Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up
- 19. THANK YOU 19 @ileshmistry | #MMT_TechMeetup Register with Kentico Kontent - 90 days free trial Introduction to Svelte Introduction to Svelte - MMT Tech Meet-up CONTACT ILESHILESH MISTRY (CMS SPECIALIST & KONTENT MVP) @ileshmistry
- 20. REMAINING AGENDA • Looking into the Svelte compiler – Tan Li Hau (@LiHauTan) • How I built a Sapper blog with all the must-have features – Markus Hatvan (@HatvanMarkus) • Sapper JAMstack – Trello as a blog backend – Shriji Kondan (@Shriji) 20 @ileshmistry | #MMT_TechMeetup MMT Tech Meet-up MMT Tech Meet-up
Editor's Notes
- Svelte has its own compiler for converting app code into client-side JavaScript at build time. It is written in TypeScript. Write less code By using languages that allow for writing less code e.g. Svelte One of their goals - Reducing the amount of code you have to write https://svelte.dev/blog/write-less-code - quote this article by Rich Harris Show the example of gif showing the differences between the number of code Svelte, React and Vue have for the same thing. Image 1 vs Image 2 vs Image 3 (all screen shots) rather than gif - quoting blog post where you got them from (URL) This is just an example, but you can get the idea It takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger! Top-level elements (parent item) In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element. Bindings React is different to Vue and Svelte State No virtual Dom It compiles your code to tiny framework-less JS Your app starts fast and stays fast You tend to build your apps by creating render() functions E.g. React component
- Svelte has its own compiler for converting app code into client-side JavaScript at build time. It is written in TypeScript. Write less code By using languages that allow for writing less code e.g. Svelte One of their goals - Reducing the amount of code you have to write https://svelte.dev/blog/write-less-code - quote this article by Rich Harris Show the example of gif showing the differences between the number of code Svelte, React and Vue have for the same thing. Image 1 vs Image 2 vs Image 3 (all screen shots) rather than gif - quoting blog post where you got them from (URL) This is just an example, but you can get the idea It takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger! Top-level elements (parent item) In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element. Bindings React is different to Vue and Svelte State No virtual Dom It compiles your code to tiny framework-less JS Your app starts fast and stays fast You tend to build your apps by creating render() functions E.g. React component
- Examples (lots of examples, which allow you to amend and codepen style get used to what you need to apply in your application) Dynamic attributes Nested components Reactivity Props Each block ending (Add new) Model <svelte:body>