Svelte consistently ranks as one of the “most-loved” frameworks and is particularly well-suited to data visualization because of its approach to reactivity and transitions. Watch this Tech Talk where Codesmith Alum, James Laff, will highlight the many advantages of integrating Svelte and D3, the challenges of transferring DOM control, and the benefits of abstracting this process into a plug-and-play library.
Meet our Speaker!
James Laff
Codesmith Alum & Software Engineer
James is a software engineer/engineering mentor at Codesmith. He also builds open-source tools, including Svend3r – a D3 charting library for Svelte. When he’s not coding, James enjoys home renovations and road trips across America.
This video is a recording of a live event. To follow along live and participate in upcoming workshops and events, RSVP at
SUBSCRIBE for more! 👉https://tinyurl.com/codesmithsub 👈
Stay connected to our community!
Codesmith:
Learn JavaScript for Free:
Free Events & Workshops:
Follow us to stay updated!
Facebook:
Instagram:
Twitter:
LinkedIn:
#sveltejs #svelte #codesmith #softwareengineer
[Music] Good evening everyone and welcome to Code Smith's speaker series it is Absolutely brilliant to see so many Familiar faces hello Um my name is Marie I'm an engineering Mentor for code Smith's New York on-site Campus and I'm here to introduce the Main event of course Um James laugh is an engineering Mentor For code Smith's East Coast remote Immersive and not only that he is also The founder of spelled Society of Philadelphia another fine feather in his Cap and he is here to share his passion And expertise on you guessed it felt so Without further delay I'm going to pass It over to you James Fantastic uh Thank you Murray uh for the introduction And uh thank you all for coming Uh I I copied a few links into the chat Uh just so you have those available uh And I will be talking about svelte D3 and the what you see is what you get Future of web development and data Visualization As an open source contributor I work to Make web development more inclusive and Creative Svelte is a great means to that end but Its ecosystem of supporting libraries is Relatively Limited so I helped build a Data visualization Library spender to
Facilitate the integration of spelled With D3 My roadmap for this evening is to Introduce you to stealth highlight its Advantages for databiz and explain how And why spender came to be Back in the Dark Ages the 1990s we Didn't build web applications we Designed websites Content was mostly static You couldn't even Google anything Bandwidth was so limited that Downloading a movie took literally dates Now from the late 1990s through the 2000s web pages gradually became more Interactive thanks in large part to JavaScript But when did websites become web Applications The simplest type of interactivity Involved navigation Rather than clicking on a link to load a Different page new content loaded Without changing the URL in your address Bar over time more and more Interactivity moved into the code that Ran on the user's computer this Ultimately became the single page Application The idea was that content would load in One place maybe inside a layout that Didn't need to reload hopefully faster Than if you had to actually navigate to A new address in other words The
Experience became more like using an Application on your computer One of the major challenges to this Brave New World of web apps was the Developer experience With vanilla JavaScript uh that is plain JavaScript without any libraries you Have to specify how each HTML element or Css style needs to be manipulated using The document object model or Dom Now this vanilla approach doesn't scale Well for the developer or typically the User because even fairly common Operations like adding an item to a Shopping cart have a lot of moving Parts Sending an event to the back end Updating the number of items in the cart Changing the add to cart button to a Remove from cart button binding an Unbinding event handlers and so on and The more precise your dumb manipulation Gets the more extensive your code needs To be In addition to the tediousness of Keeping track of any changes to the Dom Vanilla JavaScript also suffers from Repetitiveness every bit of the UI needs To be handled separately and the Functionality associated with it is Difficult to disentangle from the UI Itself not only does this generate Additional work more code invites more Mistakes and every time you change one Of those repeated code Snippets you have
To manually update all the others Enter front-end Frameworks And react wasn't the first framework but It established a paradigm that changed The way we think about web development This Paradigm Shift was made up of two Parts that directly addressed the Challenges of vanilla JavaScript State And components Rather than treating dynamism as an Afterthought react bundled all Dynamic Aspects together in one concept state React also harnessed modularity a way of Dividing and organizing code into Components such that it could be more Easily reused and maintained In some ways react was one step forward And two steps back In order to manage Dynamic elements React introduced the virtual Dom The virtual Dom generates an image of What the Dom should look like and Compares it to what the Dom currently Looks like the process they call diffic They maintain that virtual Dom diffing Is much more efficient than removing Everything from the Dom and rebuilding It from scratch every time something Changes this of course is true but it's A straw man argument no one actually Removed everything from the Dom and Rebuilt it from scratch in production or Suggested that you should Because the diffing process takes place
On the client's machine all of the code Necessary to perform this diffing has to Ship along with the application This is a significant amount of bloat Of course there are ways to mitigate This minification code splitting Prefetching service workers lazy loading Etc But keep in mind that various methods of Reducing the bloke that users have to Download have no impact on the amount of Bloat their computers need to run This is one of the downsides of using React in order to use it correctly you Need to incorporate a lot of third-party Tools For that matter there are also a lot of Internal react features that are not Necessary for an app to function but are Necessary for an app to function well The fundamental problem is that react is Not fully reactive But when something changes based on a Fetch request a user input and so on React doesn't know what needs to change As a result instead it compares the way Things are to the way things should be And changes whatever differs between Those two Wouldn't it make more sense to keep Track of what needs to change and Directly update the Dom accordingly Svelt to the rescue Now unlike react svelte is a compiler so
Instead of shipping your JavaScript Along with a library that tells the Client how to render and re-render your Code svelt builds the necessary Instructions into a compiled version of Your code Rather than placing the burden of Figuring out what to re-render on the Client's machine at runtime svelte lets The developer map out the re-rendering Process when writing the app and this Process is codified at build time The other major difference between Reactants felt is it's felt compiles JavaScript topologically meaning it Knows the order in which reactive Variables depend upon one another As a result svelt doesn't need a virtual Dom or any sort of difficult it Surgically updates the Dom when the State of your app changes This improves performance reduces bundle Size and enhances code readability Time for more history this time Complements of svelte's Creator Rich Harris from his 2019 rethinking Reactivity talk In 1969 landpar introduced spreadsheets With forward referencing and natural Order sorting or what we now refer to as Reactive programming The idea is that values in one cell or Column or row can depend upon values in Another such that when those values
Change the dependent values update Accordingly in order as a simple example Think of the columns price quantity and Total where total is calculated by a Formula that multiplies the Corresponding cells in the first two Columns A sum total cell in the left top left Corner Now forward referencing means that the Spreadsheet would know the order in Which the updates need to occur so first The total column then the sum total cell Land part did not succeed however and in 1979 Visicelp debuted The visit calc's approach was much Simpler and less efficient instead of Forward referencing it simply scanned The spreadsheet from top to bottom left To right and recalculated every cell Containing a formula even worse it only Recalculated values once now if your Dependencies required multiple passes to Recalculate completely you had to Trigger each recalculation manually So their recommendation was that you lay Out your spreadsheet in such a way that Such recalculations wouldn't be Necessary in fact they insisted that Forward references were the result of Hasty or careless work The visit count was so successful that It's often considered the first killer
App the consumers bought Apple II Computers just to run it But in 1983 Lotus 123 revived forward Referencing and proved just as valuable In encouraging purchases of IBM PCS You may have guessed by now what Rich Was getting at when he told this story Reacts approach strongly resembles busy Calcs while svelte emulates landpar And don't get me wrong there's a lot to Like about react it it changed the game And web development has been vastly Better because of it But react is fundamentally flawed and It's become a victim of its own success They and by they I mean meta whose Engineers developed and maintain react Cannot completely overhaul react or Introduce anywhere near the number of Breaking changes that would be necessary To change reacts fundamental approach to Reactivity because too many companies Rely on react In the nearly 10 years since react was Publicly introduced They've released numerous features Intended to mitigate react's fundamental Flaw these have certainly helped but They haven't closed the performance Gap With sveld and it's hard to imagine that They ever will Rich invented spelled in 2016 while Working as an interactive editor at the Guardian
Given his background in journalism it's No surprise that one of the most popular Ways to use felt is for dataviz Rich's former team at the guardian uses It so does the New York Times Graphics Department where he worked as a graphics Editor until late last year when he took A job at versel to work on svelt Full-time Now one of the most powerful and widely Used dataviz libraries is D3 data driven Documents Incidentally d3's Creator Mike Bostock Also worked as a graphics editor for the New York Times clearly something in the New York water makes for great pizza Great bagels and great JavaScript Innovation E3 provides incredible tools for Translating information from the data Space to the pixel space but it has a Notoriously steep learning curve D3 is divided into modules many of which Are only used to produce specific types Of data visualizations E3 is designed with the expectation that Whichever modules you use to generate a Visualization you will use D3 selection To render it to the Dom This presents a structural problem for React because of the virtual Dom diffing Process react cannot yield control of The Dom to D3 without some additional Mechanism to enable react to stay in
Sync with re-renderings To facilitate cooperation between the Two a number of excellent D3 based Charting libraries have been developed For react including read charts Nevo and Victory In addition to making it possible for D3 To function with react these libraries Clearly demonstrate the appeal of a Simplified developer experience around Databizz Svelte doesn't suffer from the same Disadvantage it's entirely possible to Render pure D3 in a svelte app Even so there are great reasons to Transfer control of the Dom from D3 to Spelled Perhaps the best reason is performance As well as D3 handles Dom manipulation Svelte optimizes it even further by Virtue of its compilation process Also very important is reusability Svelte database components can easily be Reused within and across applications One of the great benefits of sveld is That it unifies markup styling and JavaScript in a single componentized File Styles are scoped by default alleviating A common pain point of CSS This approach to organizing code is one Of many lessons learned from other Frameworks over the years that stealth Could seamlessly Incorporated
So how should svelte and D3 work Together Certain D3 methods or modules generate Chart elements and spelled conditionally Renders them using logic blocks this Takes the Best of Both Worlds d3's Ability to manipulate data and organize It into a visual form together with Svelte's ability to render visual data To the Dom including Transitions and Animations In addition to taking advantage of Svelt's performance optimization Relative to D3 Moving Dom related code into svelte Dramatically enhances readability As I'll demonstrate later on D3 is Incredibly imperative and uses highly Esoteric syntax it takes a significant Amount of time to become comfortable With d3's API The web development and dataviz are Often collaborative Endeavors and the More that people working on the project Are able to understand what the code is Doing the better able they'll be to Contribute this is one of the best Things about using svelte not only Compared to D3 but also to react and Other front-end Frameworks it strives to Be as intuitive as possible by keeping Your code very nearly within the Approachable domains of JavaScript HTML And CSS
Celts efficiency makes for a great user Experience while its readability makes For a great developer experience These are undoubtedly among the top Reasons why developers love spelled Indeed it consistently ranks at the top Among front-end JavaScript Frameworks in Developer surveys It doesn't help that svelt is extremely Easy to learn especially if you're Already familiar with JavaScript you can Get through the tutorial and build a Simple application in only one to two Hours Another reason developers love spelled Is that it works incredibly well out of The box unlike react you don't need to Worry as much about implementation to Make your app performant Now For complicated visualizations or Applications in which the visualizations Are fully interactive and integral to The app's flow and navigation the best Option is to use felt and D3 in the way That I've described but there are also Much simpler use cases when all you need Is a chart and you don't want to climb The D3 mountain in order to drop one Into your application But there are some great resources for Building your own charts including Pancake from Rich Harris and layer cake From his former colleague Michael Keller
But nothing interactive or what you see Is what you get React has an extensive ecosystem of Third-party libraries whether you need a Streamlined visual interface like Material UI or robust State Management Like Redux you can find a great tool to Facilitate your development process but React shouldn't have all the nice things The spelled Community is growing at an Astounding rate one of the most Significant obstacles to svelte's Adoption is that it lacks an extensive Ecosystem of quality tooling With spender my team built a tool to Fill that void with an interactive Wysiwyg databiz library for spelled Which Should be playing this so Maybe I will Close this and restart it and see if it Will present properly There we go My team built a tool to fill that void With an interactive wysiwyg dataviz Library for spelled First you customize a chart by updating Adjustable properties you can see the Chart and code update in real time in The interactive application Then you copy the code directly into Your stealth component next you format Your data according to the schema sender
Provides and that's it Spender functions like a wrapper around D3 rather than trying to replace D3 Modules it incorporates them into Plug And Play visualizations the easiest way To customize a chart is to see how each Parameter affects its presentation and That's exactly what spender provides Take for example the area chart This chart offers uh 21 customizable Properties including margins axis labels Grid line visibility colors opacity and More There's always a balancing act when Designing a tool like this it should be Robust enough to be useful for many Applications but not so complicated that Users might as well use the tools it's Meant to abstract away Spender allows users to customize as Many properties as possible without Requiring unintuitive interaction with D3 essentially spender takes all of the Parameters exposed by d3's API and makes Them Interactive Some properties are fairly common across Charts colors size stroke opacity and Tool tips but others are highly Particular to each chart The chord diagram for example includes Properties pertaining to the band around The perimeter The Ridgeline plot allows you to specify The extent of the overlap between each
Ridge line The radial stacked bar chart lets you Choose whether to sort the values The spelled Rebel is an excellent Playground to tests felt code One of the really neat things about it Is that you can see how stealth compiles Your code by looking at the JS output CSS output and AST abstract syntax tree Output tabs You can even adjust compiler options for Example you can choose to generate Client or server-side rendered code In our case it's a perfect place to Demonstrate how straightforward the Developer experience of spender is all We have to do is paste in the data and Customize chart code Before I dive into technical challenges I want to point out that some things That would ordinarily pose technical Challenges like Transitions and Animations didn't because felt includes These features out of the box Take sender's bar chart for example the User is able to sort the data by Ascending or descending frequency or by Its original default order In order to make the change from one Sorting to another feel more realistic It helps to apply an animation effect Rather than just snapping from one to The other In spelled anytime you're changing the
Positions of elements already on the Dom You'll want to turn to the animate Module There are a number of parameters you can Use to customize the flip animation Effect but in this case the only one we Need is duration which is set to one Second Because felt works as a compiler it only Includes the code to render this Animation if you're using it this is Part of the reason svelt can include a Feature like this that you'd need a Third-party library to implement in React If you want an effect when adding or Removing elements from the Dom you'll Want to use the transition module Transitions in felt are just as Straightforward as animations let's say We want the tooltip for the line chart To fade in and out All we need to do is import fade from The transition module and apply it to The tooltip div You can always plug and play with Spender charts but if you do want to add Further customization it's much easier Because all the Dom manipulation is now Handled by svelt instead of D3 Okay There were a number of interesting Technical challenges in the course of Developing fender
The most interesting of these were Accessibility unpacking D3 reactive Stores and prefetching my goal in Describing these challenges and Solutions is to give you a sense of some Of the things that stealth can do and How you would accomplish these sorts of Things Spell strives to make web apps Accessible by default This is an extremely important and too Often overlooked aspect of web Development Part of the challenge for developers is That disabilities can involve Mobility Cognition Vision hearing speech or a Combination thereof The World Wide Web Consortium developed The web content accessibility guidelines Which specify three levels of Accessibility compliance for web content These guidelines provide incredibly Detailed suggestions for how each type Of information should be presented Broadly speaking they specify that Content should be perceivable Operable understandable and robust Meaning interpretable by a wide variety Of user agents Software engineering is severely lacking When it comes to diversity this is Certainly true in terms of disability And it's not intuitive for developers to Accommodate challenges they themselves
Don't face People with physical disabilities for Example can struggle to fill out forms Within preset time limits or navigate Sites without full keyboard support When so few developers understand how People with disabilities experience Their applications it is unfortunately Unsurprising that of home pages for the Top 1 million websites 97 Failed to meet accessibility standards This number has been consistent since They started testing in 2019. The most obvious impediments to Experiencing the web involve Vision Impairment including full partial and Color blindness Indeed the most common accessibility Failures all Impact people with vision Disabilities low contrast text missing Alternative text for images empty links Missing form input labels empty buttons And missing document language Incidentally 97 of the issues found fall Into one of those categories All of these issues except low contrast Text have direct implications for how Well screen readers are able to Translate content Because felt as a compiler it's able to Identify and warn you about some of the Most common accessibility pitfalls This felt guarantee accessible Applications absolutely not automated
Tools are only capable of finding 20 to 30 percent of accessibility issues and Spelled only accounts for a subset of What can be tested Ultimately the best way to ensure that Your application is accessible is to Have users with disabilities tested Manually Even so svelt's accessibility warnings Address at present half of the most Common issues missing alternative text Empty links and missing document Language Given the prevalence of these issues and The difficulty they posed to screen Reader users it is an extraordinarily Important achievement for svelt to Highlight them in the developers console As you might expect accessibility is Even more challenging when it comes to Databiz Too often screen readers are unable to Capture any information from Visualizations In the most egregious examples all of The important information on a page is Wrapped into a visualization and the Only thing a screen reader can convey is Image By default D3 does not make any Accommodations for accessibility Google charts on the other hand provides A hidden accessibility table visible Only to screen readers that provides
Access to the corresponding data This simple gesture makes an Extraordinary difference for screen Reader users the accuracy of extracted Information when using Google charts is 73 compared to 17 with D3 The providing raw data is only the Beginning of what database libraries Should offer in the way of accessibility It should be possible for the user to Navigate through data points using their Keyboard with tool tips to provide Detail about each point Keyboard navigation is always a great Start for screen readers Developers should be prompted to Describe the visualization just as alt Text describes images any text should Follow the same accessibility principles Governing text throughout the page Including readability and responsiveness Color schemes should account for color Blindness and colors should only Complement what is already apparent As with accessibility in general it is Extremely difficult to build a library That accounts for all of these Considerations At a certain point the best we can do is Point developers in the right direction And trust that they will take on the Responsibility of inclusive design But pointing developers in the right Direction helping them make good choices
Is a reasonable expectation for the Tools we build Sender's goal is to incorporate as many Accessibility best practices as possible For example most Fender charts can be Navigated entirely by keyboard with Information provided by each data point Those that aren't yet will be bystanders Stable release In this respect the goal is not only to Make D3 more approachable the goal is Actually to make D3 more responsible D3 is built on the assumption that it Will directly manipulate the Dom Most of this functionality is contained Within the D3 selection module which Includes many methods that mimic Javascript's own Dom manipulation Methods Standard D3 approach is to generate each Component or layer or aspect of a Visualization in the order they need to Be applied to the Dom But the way in which it breaks Visualizations into discrete tasks is Far less intuitive than svelte HTML Formally we'd say that D3 is more Imperative your code describes how its Goal is accomplished whereas spelled is More declarative your code describes What its goal is And wouldn't we all prefer to tell Computers what to do and just let them Figure out how to do it
The challenge for spender was to Capitalize on the useful methods from D3 While leaving its tedious approach to Dom manipulation behind In some cases these adaptations are Straightforward for example this D3 code Simply becomes this HTML code in a Stealth component This example is a great illustration of D3's imperative approach in comparison To HTML The only svelt specific code here is Width and height in curly brackets in Blue For those of you who are familiar with Other front-end Frameworks this looks Suspiciously like jsx but cleaner Because it's felt when the attribute Name and value match in other words Width is equal to the variable width you Only need to provide the name width Otherwise this example is pretty Self-explanatory you can see how both Code Snippets create the same SVG Element with the same properties You can also see how stealth's HTML is More declarative we simply Define the Element with its attributes in line Rather than specifying and applying each One separately with a D3 method Other cases are slightly more complex For example this D3 code becomes this Svelt HTML Here we see a spelled logic block using
Each which allows us to Loop over a list Of data in this case an array of wedges In a pie chart The D attribute of a path element Defines the path's shape but don't Confuse this with the D that is used by Convention in D3 to represent a given Element of data Wedge path is a manually defined Function that generates the path for Each wedge of the pi using D3 methods Because svelte gives us access to each Element in the wedges array as well as Its index I we can easily select the Appropriate color for each wedge from Our colors array without an intermediary Color function It's much easier to see what this felt Example does For each wedge create a path element of Corresponding color and the derived Shape This Simplicity is not a coincidence nor Is it a pleasant side effect of svelt's Structure Simplicity is at the core of svelt's Design both in terms of what happens Under the hood in the compiled code and In terms of what the developer sees Some of you have never seen spelled code Before but I'll bet you can look at this Snippet and make remarkably accurate Guesses about how it works based solely On your intuition
The same cannot be said of D3 This is valuable even for experienced Developers the clearer your code is the Less likely you are to make mistakes and The more likely you are to catch them Perhaps even more significantly the less Code you write the less likely it is to Contain bugs and the less code you ship The faster it can run In some cases the translation from D3 to Spelled is quite complicated This D3 code Becomes this svelte HTML Now there's a lot we could unpack in This circle packing bubble chart but I'd Like to focus on the t-span subtext In svelte It's relatively clear What's Happening Here we have an each block Nested inside and each block For each Leaf we render subtexts from an Array that we derive using split In D3 the nesting of data is not Apparent also you have to follow Lowercase D and uppercase D to Understand how the subtexts array is Being derived and when it's being Referenced I'm not claiming that this spelled code Is 100 intuitive just that it's far more Declarative than its D3 counterpart As you can hopefully start to get a Sense from these examples there is Ultimately a kind of Simplicity in this Method of spelltifying a D3
Visualization Once you get the hang of D3 its methods And conventions Transferring Dom manipulation to spelled Is relatively straightforward but as I Said before D3 has a steep learning Curve One of spender's goals is to become a Hub for the stealth Community to share Dataviz components if you're familiar With observable the idea is a similar Svelte-specific platform Particularly with this goal in mind it's Important that the developer workflow For adding new visualizations to the Interactive application is as Streamlined as possible In order to add a chart to the Application you need to have one the Standalone code that renders the chart With each customizable property Converted into a reactive variable A Json file with all of the information Necessary to display the chart in Spender and dummy data Spelled takes advantage of the rarely Used JavaScript label to identify Reactive statements specifically you Preface each reactive statement with Dollar sign colon This reactive label can be applied to Variable declarations and reassignments Of course but also the functions Loops Etc
In spender it's therefore necessary to Distinguish statements that need to be Reactive in the Standalone component From statements that only need to be Reactive in Spender This is accomplished simply by starting Whatever variable or function name Follows the label with the word reactive Not the most original approach perhaps But certainly clear The purpose of a storage felt is to Manage state that needs to be accessible To a number of unrelated components in An application To keep the workflow simple and the app Performant the best approach for spender Was to have only one reactive store Shared by all of the data visualizations The alternative creating a new store for Each chart would have required changes To the core application code when adding A new chart Which would have made the process more Cumbersome especially for non-core Contributors The way this looks the way this works is That spender initializes a writable Store chart docs as an empty array When a chart loads chart docs is reset To an empty array and the charts Properties are written to chart docs Using the update method This process of clearing and Repopulating the chart Dock Store worked
Perfectly well until spender tried to Implement prefetching Now To explain the issue I have to briefly Introduce spelled kit In essence kit allows you to build a Full stack spelled application it Handles routing how users navigate Around your application page layout Aspects of pages that remain visible Across your application and data loaded How when and where your application code Runs Each of these features is very Complicated which is why kit was still In beta until just last week when Rich Announced its felt Summit that it's Officially a release candidate Smelt kit is a Thoroughly Modern high Performance framework with blazingly Fast hot module reloading using Veet Code splitting prefetching configurable Rendering server side with client-side Hydration service workers and seamless Serverless integration Prefetching is one of its best features And for spender it was the hardest to Implement The idea behind prefetching is simple Rather than waiting to import or Download code until the user loads a Page kit will pre-fetch it when the user Hovers over or touches the link to that Page
It may not seem like prefetching would Make such a big difference but it does How much time it saves depends of course On how long a user hovers over a link Before clicking on it but you can Reliably count on saving at least a Couple hundred milliseconds which can be Enough to make your app seem responsive Instead of laggy As an example by implementing Prefetching Netflix was able to reduce The time users have to wait before being Able to interact with the application by 30 percent The challenge for spender involved the Interaction between pre-fetching and the Reactive store As you navigate from chart to chart the Basic framework chart code schema data And properties stays the same Each chart has its own data and image That get plugged in Prefetching the code schema data and Chart component doesn't cause any Problem those can be downloaded to the User's machine so they're ready to go But importing the new properties into The chart docs store must wait until the User clicks the link otherwise the Current page breaks The current properties would still be Displayed in the properties section but The new properties would have been Loaded into the store so all of the
Property references of break and the Customizability would fall apart This wasn't a problem until prefetching Entered the picture because the Rendering processes could be ordered in Such a way that the store was populated Before the other components were Rendered At the time the best solution was to Take advantage of stealth's life cycle Methods Spelled provides four life cycle methods On Mount before update after update and On Destroy plus a wild card tick which We won't go into And broadly speaking three of these Mirror reacts most common life cycle Methods on Mount is like component did Mount on Destroy as like component will Unmount and after update is like Component did update however in this Case all three of those life cycle Methods would come too late to update The reactive store new properties need To be loaded into the store before the Component is rendered to the Dom because All three sections of the page depend Upon those values So the life cycle method that finally Resolved the issue was before update Placed in the parent component of the Components to be prefetched The closest equivalent to before update And react is the seldom used get derived
State from props The critical piece here aside from the Choice of life cycle method is its Placement in the parent component slug Which makes it possible to load data Dynamically based on a route parameter Reverse engineering and application Reveals a lot of the methods and Approaches that are successful when Working with its languages You should have also seen some of the Ways in which spender served as a stress Test particularly for spelled kit these Sorts of experiments are critical to Kits development and help bring it Closer to the much anticipated version One launch So what's the goal of using sender To generate data visualizations quickly That look the way you want and can Easily be integrated into a svelt Application Sender is intended to save developers Time by enabling them to build charts or Chart prototypes rapidly with Predictable and performant results Maybe you have an internal site with a Dashboard to track product or site Metrics or maybe you have a user-facing Application and you want to drop in a Slick chart to clarify your message and Improve UI It could also be used by non-programmers Design and product teams journalists Etc
To mock up data visualizations and Improve collaborations with software Engineers Sender could even be appropriate from Somewhat more complicated use cases Given how much more intuitive it is to Customize the spelled code it provides Spender is open source and the more People that contribute the better it Will be One of the best things about working With spelled is getting to interact with Its Vibrant Community if you yes you and Further customizations to a spender Chart or build the chart component for Spelled please submit a pull request to Spenders GitHub repo similarly if you See anything not working or you want to Request a chart or feature open an issue But what about wysiwyg There are A few philosophical motivations behind Svelt that I believe Are going to be extremely significant in The future of web development One Programmers should be able to devote the Largest portion of their time to the Creative aspects of web development not The implementation details Two The barrier to entry for interactive web Development should be as low as possible And three
Web applications should be fast by Default These can all fit Under One Umbrella Goal Empower designers Rich recently shared his long-term Vision for the future of spelled if Possible he said he'd like to create a Wysiwyg environment for building full Stack applications He is not envisioning something like no Code which he believes abstracts away Too much of a process He's thinking of an inclusive interface That allows people to participate in the Web development process without Downloading vs code This is an incredibly Illuminating Inspiring insight and it speaks directly To the motivation behind sender Building interactive web applications is A specialized skill But why is that The challenge should revolve around Creativity not Logistics In many ways web development has Actually become more approachable over The past 20 plus years now for example You don't have to worry about how your Code is going to look in one browser Versus another Rest in peace Internet Explorer You don't have to maintain a physical Server you don't need to learn any Languages other than JavaScript HTML and
CSS Felt itself is already a giant leap in This direction it's so much easier to Learn write and maintain Spelled shines in many instances not Just for datavids but dataviz makes it Especially clear how straightforward Interactive web development can be Now that rich is a Purcell working Full-time on salt and stealth kit we Should be even more enthusiastic for the Future of web development React brought a paradigm shift that Transformed the way in which we write Front-end code At their core Frameworks are a state of mind a way of Thinking about how code works This directly informs our understanding Of what our code can do It's no surprise then that react has Been pivotal in transforming the web to Be more Interactive React showed us what was possible by Showing us how to achieve it Sveld refines react Paradigm by Simplifying its approach by making Reactivity explicit and eliminating the Virtual Dom By building on its strengths of Modularization and declarative style and By mitigating its weaknesses by reducing Build size and other inefficiencies In terms of implementation svelte and
Perhaps even more so kit is radical But the developer experience isn't Radically different yet It's a vast improvement over the Tediousness of optimizing react Applications by telling the framework How to do its job rather than simply Trusting that it will And true reactivity is a significant Innovation both in terms of performance And in terms of empowering designers But isn't the process of modularizing Code fundamentally about implementation Not imagination What if we could just tell the computer What we want our website to look like And what we want it to do and let the Computer figure out how best to achieve Our vision As long as we're building interactive Applications out of components we're Still living in reacts paradigm But if our wysiwyg goals come to Fruition That Will be a true paradigm shift Thank you all for your uh your attention Uh at this at this point I am uh I'm Excited to take any uh any and all Questions you may have Um I'm started designing web sites and Applications or I guess sites we'd call Them back in the in the mid 90s I got Horribly out of dates uh through the
Odds and Beyonds that's why I'm kind of With codesmith at the moment getting More modernized in the in the web world Uh as I'm getting more familiar with Frameworks uh of various Technologies And whatnot I am having a bit of difficulty Understanding svelte's role because the Demonstrations you were giving us were Predominantly sort of in in literal Graphing not to be conflated of course With graphql which just has a similarity By name but as a sort of meta framework In a sense right is is spelled in a Sense like for visualizations of data That's its primary the the ease of you Know rendering server side or our Client-side hydrating on the the Client-side giving you that full Customizability or or is there more to It I ask too because you mentioned that The founder um at Purcell who also Created I think next.js which is a react Framework they seem to be like all about The Frameworks so I'd like I just sort Of wanted to check in on my Understanding of that absolutely great Great questions great observations Um You're you're exactly right uh in that Svelte is Incredibly well suited to data Visualization uh and you can you can Clearly see when you're working with
With dataviz Um the the advantages just because of uh The the sort of nature of the Interactivity Um the the the the amount of rendering Uh the the sort of you know a lot of Sort of small graphical components that Can come in and out of the page and sort Of it's you know so it's not surprising In a sense that uh you've seen uh Graphics design teams in major newsrooms Uh Embrace svelt first Um But but broadly speakings felt is a Framework just like react or view or Angular Um it's it's capable of doing any of the Same things Um I think One of the one of the issues one of the Reasons that you you don't see it being Embraced as much yet is that stealth kit Isn't a stable release yet and it's you Know having moved from beta to release Candidate last week is a huge step uh When stealth kit is stable because there Are a lot of companies that are are Interested but they don't want to they Don't want to start building something In a in a framework that's not at stable Release understandably because I mean Just in the past few months there there Were a whole host of breaking changes That would require significantly
Reworking your code base and that that's Not something that uh you know uh a lot Of companies uh have the bandwidth for So uh so once once felt kit uh is a Stable release such that you can really Uh build full stack uh spelled Applications uh I I think you'll see Broader adoption and we'll we'll have More examples of sort of uh where's felt Shines but in terms of you know its Performance metrics it's it's faster Than react more or less across the board Um it just you know it's really it's That last piece it's spelled kit um that I think is going to need to come into Into play before before we see Um broad adoption thank you and to sort Of double question this is my actual Question now that I've confirmed my Understanding is somewhat clear is felt Necessarily an end-to-end like your Front end and your back end need to be Else filter can it plug into sort of Different Frameworks and and Technologies Yeah it's certainly compatible with Other uh with other back ends you could Use it Um with anything there is there are some Advantages to using it with stealth kit At least in theory once felt kit arrives Um Chief among them the fact that uh if You're familiar with spell you'll find Kit to be also very familiar and so it
Saves you the trouble of having to learn Something radically different but you Can absolutely use uh spelled kit uh Spelled excuse me with uh with a Different uh back-end framework Thank you very much yeah absolutely Rami Yeah thanks James for that very Informative and wonderful presentation Um I have I have a question so um sevel It seems like a really uh amazing idea And sort of visualizing a lot of like The react uh Framework and whatnot I wonder for uh Next JS Um it is one of the biggest most Up-and-coming according to the stack Overflow survey in 2022 and one of the Top most Wanted uh meta framework in in React do you see a niche where Savelle Can come in and sort of like answer that We're providing visualization for Developers and next.js Um do you see so some sort of like Transition into nexjs Um or like what's on your mind in terms Of that Yeah I mean Having versus hire uh Rich Harris Presents a lot of great questions Um uh none of which they've uh Understandably chosen to answer uh Because you know they have they have all Sorts of plans uh and they'd like to Surprise us
Um I think You know it it'll be interesting to see When Um when when kit is a stable release Sort of how things unfold Um I think Rich Harris has talked on numerous Occasions about Um He would rather have Um a smaller group of users that are Really passionate about using spelled Than a larger group of users that Tolerate it Uh and I think I think this goes to Um some of the ideology I mean react React isn't going anywhere in the Immediate future it's it's used in 80 Percent of professional code bases and And it's you know it's it's broadly Understood it's it's a common language That the developers can use which is Hugely valuable Um But it does have it does have Significant shortcomings and you know Things don't tend to last uh for a very Long time in the web development World We're coming up on 10 years for react so You know I'd be surprised if react is Still as dominant in five years Um will that be spelled or will it be Another framework that's been inspired
By svelte you know it is tough to say It's tough to say but I think Um You know next next is obviously a hugely Valuable tool in terms of Um bringing some some server-side Rendering to the to the react party Um but but I think it's still It it's always going to be a heavier Lift to try to get react to do the Things that svelte and other uh more Modern Frameworks Um just do In inherently Gotcha and thank you so much yeah thanks For the question Michael what's on your Mind yeah um so first of all I just Wanted to thank you for the wonderful Tech talk but I guess as for my question I'm just wondering obviously react is Still the big player like you mentioned That a couple of times already but when It comes to Felts adoption do you think There's still any barriers that are just Preventing people from jumping on Because obviously his felt is going to Have much higher uh performance overall But it do you think there were any Barriers as far as like developer Experience or just any pain points when It comes to actually developing a spell App that might turn someone away um from What I understand the small team is more Interested is or I guess more willing to
Throw away previous work if they don't Think it's the right abstraction or if It just doesn't work but do you think That just makes people a little bit more Gun shy Yeah I mean It's a great question Um I I would like to think that that's felt Version three Um which uh which came out in 2019 is Is kind of the the version of svelte That that's going to to be svelt moving Forward Um You know and and with kit There are no more planned breaking Changes that's the That's sort of the the meaning of the Announcement that it's moved into uh in The stable uh into release candidate Phase I think I I think there are some things though That that spell Um and especially spelled kit need to Improve on Um And I think a lot of those sort of Center around Error handling and and the sort of edge Cases uh that you encounter uh once you Start putting applications under heavy Heavy use you know there are just things
That are that are really hard to Anticipate Um about Frameworks like this building a Framework especially on the back end and So It's sort of it's sort of uh you know a A cycle that that can go either way Right because people don't want to Necessarily embrace it because they're Not sure how it's going to work but the Way that it works depends upon having Users that then you know share issues That can be resolved So You know I I'll be curious to see I'll Be curious to see Um because I I do believe that that the The lack of of a stable release back end Counterpart is the the number one uh Issue although a close second would be Tooling you know the people people I Mean it's a love-hate relationship Because people are used to the react Tooling and they appreciate that it's a It's a wide ecosystem but also you know Some people would rather not have to Reach for 10 additional tools than Libraries in addition to their framework Just just to build the application so Um You know I I think I think in both cases It really comes down to to uh adoption You know and my hope is that Um with Rich being at Purcell now I mean
You know before he was at Purcell there Was nobody working on this framework Full-time whereas react has you know a Team at meta that's been that's been Working on this for for a decade uh plus Since it was you know an internal tool First so uh Yeah I think I think it's a great Question I think Um you know the the proof will be in the In doing Okay thank you yeah because I I guess We're a little bit of context I was Actually looking at some Versa job Postings recently and I did see that They were actually dead or hiring Content Engineers as in people who are Software Engineers but we write Documentation for other people but it Was specifically for sveld so it does Seem like they are willing to put a Little bit more behind that now that Rich is on board and like there's a lot More momentum going Yeah absolutely it's a it's a great I Mean it's an exciting time and you know Spelled has an incredible tutorial the Onboarding experience for svelt is just Phenomenal for Kit not so much for Kit They they don't they don't have the Tutorial yet so I'm I'm sure they're Looking for people to come in and help Put that together and and really you Know make that onboarding as seamless as
Possible Thank you Fantastic I don't know if there are any Questions in the chat that uh that I Just look at yes we did we all asked Jeeves so many questions Um [Music] All right Any uh Any other questions I got one real real quick How did you go about uh doing your Market research and down selecting to uh Your project in particular Great great question Um you know uh It is it's always tough to to sort of Find a niche Um we we were working on a on a tight Schedule we knew we had a limited amount Of time to to build the product we had a We had a small team Um Four Engineers we had a month uh to to Build the tool so Um So feasibility was a was a major Consideration Um Uh we'd all we'd all worked with Um some of the react Tooling in this Space like uh recharts and and Nevo Um and we were all excited about spelled
Um and this felt Community is uh Incredibly uh vibrant as I said and and They they communicate a lot the Discord Server I think is you know coming up on On 50 000 uh members now and they were More than happy to talk with us about What sort of tool would be useful Um you know Reddit threads and and this And that ultimately you know it just Seemed like a like a great fit given uh Given the time we had Thank you yeah Well uh it's been uh it's been an Absolute pleasure uh thank you all for Uh Thank you all for coming and we will Send out the uh the slides I'll make Sure that those are that those are Shared and uh Yeah hope to see you next time [Music]
