Svelte the future of frontend development

Aug 14, 20191 like591 views

This document provides an overview of the Svelte frontend framework. It begins with a brief history of frontend development and the increasing complexity of building for the web. It then introduces Svelte as a framework that aims to improve both user experience (UX) and developer experience (DX). The rest of the document demonstrates core Svelte concepts like components, reactivity, routing and shows examples built with Svelte. It emphasizes that Svelte compiles to optimized vanilla JavaScript for improved performance.

Svelte
The future of FrontEnd Development

Tom Wilson
Tabula Rasa HealthCare, Inc: TRHC
Twitter: @twilson63
Github: https://github.com/twilson63

Agenda
● History of Frontend Development
● UX vs DX
● Current Status of Frontend
● Introducing to Svelte
● Components
● Micro-Workshop - Reactivity, Workflow, Composition
● Routing
● Fin

Follow along
Want to follow along with the exercises?
Go to
https://glitch.com/~fefuture
And click the Remix This (button)

Brief History of Frontend
The frontend development ecosystem has been in a constant churn since DHTML
and ajax was introduced in the early 2000s. The browsers have gotten more
powerful and feature rich. The complexity of the web has constantly grown by
staggering amounts.
● AJAX
● Prototype
● MooTools
● JQuery
● Backbone
● Angular
● React
● Vue
● Svelte

Today
Billion People
Online
4
½ the world's population

The result of this
radical change, is that
it is more
complicated to
develop for the web.

There is an epic
battle between
UX and DX
Users want speed,
Developers want
productivity(sanity)

Current Status
=
Build Tools + Frameworks

What if there was a
way to achieve UX
and DX with a Fx?

Svelte
Cybernetically enhanced
web apps
https://svelte.dev

What if there was a
framework that
worked much like
HTML, CSS, and
Javascript in 1999?

What do you
mean like 1999? HTML/First Components
HTML First Components
https://glitch.com/edit/#!/remix/svelte-talk-demo-1

A Svelte Component is a HTML File with a twist

Let’s build a Movie
Search, to
demonstrate,
Reactivity, Workﬂow,
and Composition

https://movies.twilson63.sh
When ﬁnished our project should look like this.

https://glitch.com/edit/#!/remix/svelte-v3-movie-
demo
Getting Started Remix this App

The Best Part! - Got the need for speed!
Svelte compiles your code to vanilla js, this means it ships
with no framework, it ships with optimized javascript ready
to run! You get small bundles that are fast!
The movie search demo if 4.6K GZipped!

Resources
https://svelte.dev

Wait, There is more...
● Want Server-Side rendering solution?
Checkout Sapper - https://sapper.svelte.technology/
● Want mobile development?
Check out SvelteNative - https://svelte-native.technology/
● Join the Chat
https://discord.gg/yy75DKs

Other Reading/Listening Material
https://svelte.dev/blog/svelte-3-rethinking-reactivity
https://medium.com/@Holben/why-sveltejs-may-be-the-best-fram
ework-for-new-web-devs-df9300a26ec2
https://github.com/sveltejs/rfcs/tree/master/text
https://svelte.technology/blog/svelte-on-the-changelog
https://www.listennotes.com/podcasts/shoptalk-podcast/349-ta
lking-svelte-with-rich-od-asw57IHJ/
https://twitter.com/sveltejs

Why should I learn Svelte?
● Great for Beginners
● Ok, I am going to learn Svelte, how can I leverage this
new skill if my place of work requires ___ Framework.
○ Personal Projects
○ Prototypes, proof of concepts
○ Shared Reusable Components
● Looking at different ways at solving problems will make
you a better developer.
● Other questions?

Svelte is a frontend framework that focuses on compiler-centered reactivity rather than a virtual DOM for better performance and smaller bundle sizes. It allows writing components in a simpler reactive way using declarative templates, properties and events. The talk covered Svelte basics like project setup, components, events and lifecycle methods. It demonstrated Svelte's speed advantages and discussed the ecosystem of libraries and community support including Typescript. Advanced topics covered included Single Page Application routing with Sapper and NativeScript for mobile.

Learning SvelteChristoffer Noring

Svelte as a Reactive Web FrameworkUniversity of Moratuwa, Katubedda, Sri Lanka

Pros & cons of svelteElenorWisozk

Formation jpa-hibernate-spring-dataLhouceine OUHAMZA

Java 9 New FeaturesAli BAKAN

The document provides an overview of new features in Java 9, including: - The introduction of a module system that divides the JDK into smaller modules, allowing applications to only use necessary modules. - Private methods can now be defined in interfaces to avoid redundant code. - Multi-release JAR files allow libraries to support multiple Java versions. - Various commands are described to work with the new module system, such as listing modules, describing modules, compiling modular code, and creating a custom JRE with only required modules.

Introduction to ReactRob Quick

React JS: A Secret Previewvaluebound

In this presentation, Prashant Sharma of Valuebound has talked about ReactJS - a JavaScript library for building user interfaces. Check out the agendas to know what is there for you. ---------------------------------------------------------- Get Socialistic Our website: http://valuebound.com/ LinkedIn: http://bit.ly/2eKgdux Facebook: https://www.facebook.com/valuebound/ Twitter: http://bit.ly/2gFPTi8

Deep Dive Java 17 Devoxx UKJosé Paumard

The features released between Java 11 and Java 17 have brought a greater opportunity for developers to improve application development productivity as well and code expressiveness and readability. In this deep-dive session, you will discover all the recent Project Amber features added to the Java language such as Records (including Records serialization), Pattern Matching for `instanceof`, switch expression, sealed classes, and hidden classes. The main goal of the Amber Project is to bring Pattern Matching to the Java platform, which will impact both the language and the JDK APsI. You will discover record patterns, array patterns, as well as deconstruction patterns, through constructors, factory methods, and deconstructors. You can find the code shown here: https://github.com/JosePaumard/devoxx-uk-2021

React hooksRamy ElBasyouni

The document discusses React patterns and hooks. It covers topics like inheritance, composition, mixins, render props, higher order components (HOCs), and React hooks. Some key points: - Inheritance and composition are approaches to code reuse in object-oriented programming. React uses composition over inheritance. - Mixins were introduced in 2015 for code reuse but are now deprecated due to issues. Render props and HOCs are preferred patterns. - Render props and HOCs allow code and state to be shared across components. Render props have fewer levels of nesting while HOCs are better for applying multiple concerns. - Hooks were introduced to overcome class component limitations and support functional components with local state and lif

Introduce yourself to java 17ankitbhandari32

ReactAmitai Barnea

React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces. The key principles of React include breaking UI into components, unidirectional data flow, identifying UI state, and dispatching actions to change state. React uses JSX syntax which resembles HTML but integrates JavaScript. Components can be "smart" or "dumb", with smart components providing data and dumb components displaying it. Redux is often used with React to manage state in a centralized store using actions and reducers. Debugging tools like React Developer Tools and Redux DevTools help develop React applications.

Clean ArchitectureBadoo

Over the last year there has been a lot of buzz about Clean Architecture in the Android community, but what is Clean Architecture? How does it work? And should I be using it? Recently at Badoo we decided to rewrite our messenger component. Over the years this core piece of functionality in our app has become large and unwieldy. We wanted to take a fresh approach to try and prevent this from happening again. We choose to use Clean Architecture to achieve our goal. This talk intends to share our journey from theory to implementation in an application with over 100 million downloads. By the end, you should not only understand what Clean Architecture is, but how to implement it, and whether you should.

Optymalizacja frontendu w 2022Bartłomiej Miś

Dbałość o wydajność frontendu stała się koniecznością, ale często zatrzymujemy się na elementach, których nie da się zoptymalizować. Pozornie. Pokażę Ci 10 przykładów z realnych projektów, gdzie za pośrednictwem <fscript>, Qwik, Partytown oraz wiedzy o działaniu przeglądarki zoptymalizujemy skrypty zewnętrzne (będące powodem wysokiego TBT i TTI). Pokażę Ci zaawansowaną optymalizację ładowania assetów i renderowania strony (z podeściem connection-aware i użyciem Resource/Priority Hintów). Wszystko, co w 2022 ułatwia dostarczanie jak najlepszego UX na stronie i zapewnienie jak najlepszych not Web Vitals.

React-JS.pptxAnmolPandita7

React js is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It allows creating reusable UI components that can be nested to build complex applications. A React component may maintain internal state and re-render when data changes. React uses a declarative paradigm that makes code more predictable and easier to debug. To use React, install Node packages and create a new project using create-react-app. Components let you break up the UI into reusable pieces responsible for rendering HTML. Components can be stateful class components or stateless function components. Components can be created using ES6 class syntax or function syntax and can be nested. Choosing between class and function depends on requirements like using

Spring bootsdeeg

This document contains an agenda and slides for a presentation on Spring Boot. The presentation introduces Spring Boot, which allows developers to rapidly build production-grade Spring applications with minimal configuration. It demonstrates how to quickly create a "Hello World" application using Spring Boot and discusses some of the features it provides out-of-the-box like embedded servers and externalized configuration. The presentation also shows how to add additional functionality like Thymeleaf templates and actuator endpoints to monitor and manage applications.

React JSSoftware Infrastructure

React is an open source JavaScript library for building user interfaces. It was created by Jordan Walke at Facebook in 2011 and is now maintained by Facebook, Instagram, and a community of developers. Major companies like Facebook, Netflix, Instagram, Khan Academy, and PayPal use React to build their interfaces. React uses a virtual DOM for faster rendering and makes components that manage their own state. It uses JSX syntax and a one-way data flow that is declarative and composable.

Introduction into ES6 JavaScript.boyney123

Spring boot introductionRasheed Waraich

Rasheed Amir presents on Spring Boot. He discusses how Spring Boot aims to help developers build production-grade Spring applications quickly with minimal configuration. It provides default functionality for tasks like embedding servers and externalizing configuration. Spring Boot favors convention over configuration and aims to get developers started quickly with a single focus. It also exposes auto-configuration for common Spring and related technologies so that applications can take advantage of them without needing to explicitly configure them.

Angular performance slidesDavid Barreto

This document summarizes techniques for optimizing Angular application performance, including ahead of time compilation, lazy loading, change detection strategies, avoiding memory leaks, and server side rendering. It provides code examples and compares boot times between different configurations. The techniques can improve first meaningful paint time by up to 86% compared to the default configuration.

Introduction to React JSBethmi Gunasekara

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses virtual DOM which improves performance and can render on both client and server. React encourages a component-based approach where UI is broken into independent reusable pieces that accept external data through properties. Components manage their own state which allows the UI to update over time in response to user input. This makes React code more predictable and easier to debug than traditional two-way data binding.

Intro to ReactJustin Reock

The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.

JenkinsRoger Xia

Jenkins is a tool that supports continuous integration by automatically building, testing, and deploying code changes. It integrates code changes frequently, at least daily, to avoid "big bang" integrations. Jenkins runs builds and tests across multiple platforms using slave nodes. It supports various source control systems and build tools and notifies developers of failed builds or tests through email or other plugins.

Reactjs Neha Sharma

Coroutines in KotlinAlexey Soshin

Coroutines are Kotlin's solution for concurrency and allow doing something else while waiting for results. They avoid issues with threading like memory usage and bottlenecks. Coroutines use suspending functions to pause execution and switch to other coroutines. They can be cancelled, have timeouts set, and structured hierarchically with jobs. Common coroutine patterns include producers that return values on channels and actors that receive messages on inbound channels. Coroutines are backed by event loops and may require yield() if CPU bound to allow other coroutines to run.

What is front-end development ?Mahmoud Shaker

Reactjs workshop Ahmed rebai

The document outlines a React workshop covering what React is, its core concepts, and coding with React. It begins with an introduction and overview of React. It then covers key React concepts like components, the virtual DOM, JSX, state and props. Finally, it demonstrates how to start coding with React by rendering a component, using state, and working with forms. Resources for further learning are also provided at the end.

Apache Flex and the imperfect Webmasuland

This presentation has been presented at the Flex User Group in Berlin [1] on July 5th, 2012. I basically tried to cover the current state of Apache Flex, its possible future role in 2050 and compared Apache Flex with other Web technologies. I also tried to summarise my current work at Apache Flex. Hopefully, you'll find this presentation inspiring, too ;) [1] http://www.flash-kiez.de

Web Frameworks of the Futureelliando dias

This document summarizes and compares several popular web application frameworks: Ruby on Rails, Grails, Flex, and Google Web Toolkit (GWT). It discusses the REST support and one-to-many capabilities of each framework. It also compares performance and supported platforms. The document concludes that the choice of framework depends on the specific application requirements and recommends prototyping with each framework before selecting one.

More Related Content

What's hot (20)

React JS: A Secret Previewvaluebound

Deep Dive Java 17 Devoxx UKJosé Paumard

React hooksRamy ElBasyouni

Introduce yourself to java 17ankitbhandari32

ReactAmitai Barnea

Clean ArchitectureBadoo

Optymalizacja frontendu w 2022Bartłomiej Miś

React-JS.pptxAnmolPandita7

Spring bootsdeeg

React JSSoftware Infrastructure

Introduction into ES6 JavaScript.boyney123

Spring boot introductionRasheed Waraich

Angular performance slidesDavid Barreto

Introduction to React JSBethmi Gunasekara

Intro to ReactJustin Reock

JenkinsRoger Xia

Reactjs Neha Sharma

Coroutines in KotlinAlexey Soshin

What is front-end development ?Mahmoud Shaker

Reactjs workshop Ahmed rebai

React JS: A Secret Previewvaluebound

Deep Dive Java 17 Devoxx UKJosé Paumard

React hooksRamy ElBasyouni

Introduce yourself to java 17ankitbhandari32

ReactAmitai Barnea

Clean ArchitectureBadoo

Optymalizacja frontendu w 2022Bartłomiej Miś

React-JS.pptxAnmolPandita7

Spring bootsdeeg

React JSSoftware Infrastructure

Introduction into ES6 JavaScript.boyney123

Spring boot introductionRasheed Waraich

Angular performance slidesDavid Barreto

Introduction to React JSBethmi Gunasekara

Intro to ReactJustin Reock

JenkinsRoger Xia

Reactjs Neha Sharma

Coroutines in KotlinAlexey Soshin

What is front-end development ?Mahmoud Shaker

Reactjs workshop Ahmed rebai

Similar to Svelte the future of frontend development (20)

Apache Flex and the imperfect Webmasuland

Web Frameworks of the Futureelliando dias

[RakutenTechConf2013] [E-2] HTML5 in RakutenRakuten Group, Inc.

Desktop apps with node webkitPaul Jensen

Node Webkit allows you to create desktop applications using HTML, CSS, JavaScript and Node.js modules. It combines the Chromium browser and Node.js framework. This allows building cross-platform desktop apps that can include Node functionality and access system resources. Examples are given of apps built with Node Webkit. Key aspects covered include how it integrates Chromium and Node.js, building a basic app, window rendering options, menus, tray apps, and the developer tools. Benefits for a medical conference app replacement are discussed.

Beg, Borrow or Steal: The Art of Flashing Without Flashingspjwebster

HTML5 is awesome. Well, it will be awesome when it\'s finally ready. Probably. The bad news is that by the time the W3C have finished monkeying with HTML5, I\'ll probably have given up on the web as a whole and taken up meat goat farming. The good news (for you, me and the goats) is that there\'s no need to wait for a lot of the functionality that HTML5 promises; we can start using them right now. In this session I\'m going to show you how you can steal these features from the Flash Player and use them in your standards-based sites or applications, without even a sniff of Flash on the page.

From Mediasoup WebRTC to Livekit Self-Hosted .pdfatyenoria

Social NetworkSiliconPrime

Universal apps lightning talk Elyse Kolker Gordon

- Universal apps allow code to run on both the server and client for benefits like SEO and perceived performance - They render HTML on the server and initialize the single page application with the same server-rendered data - Frameworks like React support universal patterns, requiring code to run in both Node.js and browser environments - Challenges include ensuring environments match, handling performance of rendering large amounts of content, and testing both initial page load and subsequent single page application interactions

Wds leanengineering-141103233017-conversion-gate02Shivam Prajapati

The document discusses how PayPal transitioned to a "lean engineering" model between 2011-2014 to better support rapid experimentation and continuous learning. It outlines four key principles of lean engineering: 1) Enable continuous learning through frequent delivery and prototyping. 2) Design for experimentation and frequent changes. 3) Democratize innovation by keeping teams small and using open source tools. 4) Use lean UX processes to give structure and feedback to agile development, treating users as the "brain" of engineering efforts. The document provides examples of how PayPal implemented these principles through techniques like continuous delivery, same-stack prototyping, open source development, and integrating lean UX processes with agile.

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick

The document discusses two open-source projects from Intel called Rapid Interface Builder (RIB) and Web Simulator that can be used to develop and debug HTML5 apps. RIB allows quick prototyping of web app UX through a drag-and-drop interface. Web Simulator allows debugging mobile web apps in Chromium by simulating device events and APIs. The document also discusses sample HTML5 apps created by Intel to demonstrate new web technologies and Intel's involvement in web standards.

The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsRapidValue

This document discusses tools and techniques for modern HTML5 development. It introduces CSS preprocessors like Sass and Compass that make CSS maintenance easier. Automation tools are also discussed, including Grunt for tasks like concatenation and minification, Bower for package management, and LiveReload for faster development. The Yeoman workflow is recommended for scaffolding projects using tools like Grunt and Bower.

Web Leaps ForwardMoh Haghighat

The document discusses the history and development of HTML5 and JavaScript performance. It covers how: 1) JavaScript performance improvements through just-in-time compilers and other optimizations led to a 100x increase in speed over time, enabling complex web applications. 2) The introduction of asm.js allowed native C/C++ code to be compiled to highly optimized JavaScript, closing the performance gap with native apps. 3) Recent efforts are bringing parallelism to web runtimes and the SIMD.js API in order to better utilize multi-core processors and continue improving JavaScript performance.

Webgl 기술동향 2011.8Seung Joon Choi

WebGL enables 3D graphics and hardware-accelerated rendering within web browsers without plugins. This allows for rich 3D graphics and gaming experiences to be developed for the web. There are many experiments underway with WebGL across areas like science visualization, graphics demos, and games. Over the next few years, best practices are expected to emerge from a variety of approaches, lowering barriers to entry while also pursuing high performance. WebGL has the potential to significantly expand the scope of web development.

Cross-platform Desktop application with AngularJS and build with Node-webkitWittawas Wisarnkanchana

This document discusses building a cross-platform desktop application using AngularJS and Node-webkit. Node-webkit allows turning an HTML5/AngularJS web app into a desktop application that runs on Windows, Mac, and Linux. It provides features like file access, webcam support, and good performance. AngularJS handles data binding and logic, while data can be stored locally using technologies like Web Storage or indexedDB. The application backend can be built with any server-side framework like Node.js, PHP, Django, etc. Example starter projects are provided.

2011 07 Malaysia Open Source ConferenceGen Kanai

This document summarizes Gen Kanai's presentation at the 2011 Malaysia Open Source Conference about Mozilla and the open web. It discusses Mozilla's mission to promote openness and innovation on the internet, provides facts about Mozilla's organization and user base, and showcases examples of innovative websites and tools built using open web standards. It also addresses browser usage trends in Malaysia and opportunities for growing Mozilla's community presence in the country.

Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott

In 1999, PayPal's name was synonymous with innovation. In fact, the so called PayPal Mafia (original founders) went on to establish Tesla, SpaceX, YouTube, Skype and other startups. They also provided the early investments of many of the most innovative companies on the internet today. But over time that innovation slowed to a crawl. In 2011 a number of things begin to come together for PayPal that started its journey back to innovation. This is the story of that reboot and how engineering has played a key role in partnering directly with product and design to move from a culture of products having a long shelf life, to one of rapid experimentation. In this talk, Bill will outline the principles of Lean Engineering; principles for engineering that enable learning. Drawing from his experience leading User Interface Engineering at both Netflix & PayPal, Bill will walk you through the key principles your engineering team will need to adopt to be that enabler for product and design in your organization. This talk will not just inspire you, but it will also give you some hard earned advice on making this a reality in your organization.

Koubei banquet 30Koubei UED

This document summarizes key points about the development of HTML5 from several industry leaders and perspectives. It discusses Steve Jobs noting the world is moving to HTML5. It also discusses quotes from Vic Gundotra of Google about betting big on HTML5 and its transformation. Dean Hachamotitch of Microsoft is quoted as wanting HTML5 to actually work. New HTML5 elements, APIs, and browser support are summarized.

夜宴30期《HTML5 is coming》Koubei Banquet

This document summarizes key points about the development of HTML5 from several industry leaders and perspectives. It discusses Steve Jobs noting the world is moving to HTML5. It also discusses quotes from Vic Gundotra of Google about betting big on HTML5 and its transformation. Dean Hachamovitch of Microsoft is quoted as wanting HTML5 to actually work. New HTML5 elements, APIs, and capabilities are summarized. The document concludes with discussing Microsoft's support for HTML5 in IE8 and plans for more robust support in IE9.

Cutting edge of web technologyTsutomu Ogasawara

Tsutomu Ogasawara gave a presentation on cutting edge web technologies. He discussed his career working on Sony products like the Walkman and PlayStation and more recently at Digital Garage and Rakuten developing web services. He then covered current front-end trends like CSS preprocessors, JavaScript frameworks, and task runners. Emerging technologies like WebSockets, backend-as-a-service platforms, and the MEAN stack were also presented. Ogasawara concluded by discussing how the web is evolving from traditional HTTP requests to incorporate real-time capabilities and connect diverse devices in the Internet of Things.

Deep crawl the chaotic landscape of JavaScript Onely

The document discusses the challenges of indexing JavaScript-powered websites by search engines. It notes that JavaScript rendering takes significant computational resources, straining crawlers' budgets. It also suggests that client-side rendered JavaScript websites have difficulties with search engine indexing and ranking, as content may be missed during Google's two-wave indexing process for JavaScript. The document recommends using server-side rendering, hybrid rendering, or prerendering to help search engines properly index JavaScript websites.

Apache Flex and the imperfect Webmasuland

Web Frameworks of the Futureelliando dias

[RakutenTechConf2013] [E-2] HTML5 in RakutenRakuten Group, Inc.

Desktop apps with node webkitPaul Jensen

Beg, Borrow or Steal: The Art of Flashing Without Flashingspjwebster

From Mediasoup WebRTC to Livekit Self-Hosted .pdfatyenoria

Social NetworkSiliconPrime

Universal apps lightning talk Elyse Kolker Gordon

Wds leanengineering-141103233017-conversion-gate02Shivam Prajapati

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick

The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsRapidValue

Web Leaps ForwardMoh Haghighat

Webgl 기술동향 2011.8Seung Joon Choi

Cross-platform Desktop application with AngularJS and build with Node-webkitWittawas Wisarnkanchana

2011 07 Malaysia Open Source ConferenceGen Kanai

Lean Engineering: How to make Engineering a full Lean UX partnerBill Scott

Koubei banquet 30Koubei UED

夜宴30期《HTML5 is coming》Koubei Banquet

Cutting edge of web technologyTsutomu Ogasawara

Deep crawl the chaotic landscape of JavaScript Onely

Recently uploaded (20)

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Cyber Awareness overview for 2025 month of securityriccardosl1

Build Your Own Copilot & Agents For DevsBrian McKeiver

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

How Can I use the AI Hype in my Business Context?Daniel Lehner

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

TrsLabs - Fintech Product & Business ConsultingTrs Labs

AI and Data Privacy in 2025: Global TrendsInData Labs

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Cyber Awareness overview for 2025 month of securityriccardosl1

Build Your Own Copilot & Agents For DevsBrian McKeiver

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

Svelte the future of frontend development

1. Svelte The future of FrontEnd Development

2. Tom Wilson Tabula Rasa HealthCare, Inc: TRHC Twitter: @twilson63 Github: https://github.com/twilson63

3. Agenda ● History of Frontend Development ● UX vs DX ● Current Status of Frontend ● Introducing to Svelte ● Components ● Micro-Workshop - Reactivity, Workflow, Composition ● Routing ● Fin

4. Follow along Want to follow along with the exercises? Go to https://glitch.com/~fefuture And click the Remix This (button)

5. History of Frontend

6. Brief History of Frontend The frontend development ecosystem has been in a constant churn since DHTML and ajax was introduced in the early 2000s. The browsers have gotten more powerful and feature rich. The complexity of the web has constantly grown by staggering amounts. ● AJAX ● Prototype ● MooTools ● JQuery ● Backbone ● Angular ● React ● Vue ● Svelte

7. Today Billion People Online 4 ½ the world's population

8. Mobile is here! The internet is mobile!

9. The result of this radical change, is that it is more complicated to develop for the web.

10. UX vs DX

11. There is an epic battle between UX and DX Users want speed, Developers want productivity(sanity)

12. Current Status = Build Tools + Frameworks

13. Frameworks

15. What if there was a different approach?

16. What if there was a way to achieve UX and DX with a Fx?

17. Introducing Svelte

18. Svelte Cybernetically enhanced web apps https://svelte.dev

19. What if there was a framework that worked much like HTML, CSS, and Javascript in 1999?

20. What do you mean like 1999? HTML/First Components HTML First Components https://glitch.com/edit/#!/remix/svelte-talk-demo-1

21. A Svelte Component is a HTML File with a twist

22. Components

23. Hello World Component

24. Hello Component

25. Styled Hello Component

26. Counter Component

27. Live Demos

28. Reactivity, Workﬂow, and Composition

29. Let’s build a Movie Search, to demonstrate, Reactivity, Workﬂow, and Composition

30. https://movies.twilson63.sh When ﬁnished our project should look like this.

31. https://glitch.com/edit/#!/remix/svelte-v3-movie- demo Getting Started Remix this App

32. Routing

33. page.js yarn add page

34. The Best Part! - Got the need for speed! Svelte compiles your code to vanilla js, this means it ships with no framework, it ships with optimized javascript ready to run! You get small bundles that are fast! The movie search demo if 4.6K GZipped!

35. Resources https://svelte.dev

36. Wait, There is more... ● Want Server-Side rendering solution? Checkout Sapper - https://sapper.svelte.technology/ ● Want mobile development? Check out SvelteNative - https://svelte-native.technology/ ● Join the Chat https://discord.gg/yy75DKs

38. Thank you!! 🐶

39. Other Reading/Listening Material https://svelte.dev/blog/svelte-3-rethinking-reactivity https://medium.com/@Holben/why-sveltejs-may-be-the-best-fram ework-for-new-web-devs-df9300a26ec2 https://github.com/sveltejs/rfcs/tree/master/text https://svelte.technology/blog/svelte-on-the-changelog https://www.listennotes.com/podcasts/shoptalk-podcast/349-ta lking-svelte-with-rich-od-asw57IHJ/ https://twitter.com/sveltejs

40. Why should I learn Svelte? ● Great for Beginners ● Ok, I am going to learn Svelte, how can I leverage this new skill if my place of work requires ___ Framework. ○ Personal Projects ○ Prototypes, proof of concepts ○ Shared Reusable Components ● Looking at different ways at solving problems will make you a better developer. ● Other questions?

Svelte the future of frontend development

Recommended

More Related Content

What's hot (20)

Similar to Svelte the future of frontend development (20)

Recently uploaded (20)

Svelte the future of frontend development