5 reasons to love Solid

hey there you probably heard a lot of things about solid jazz in recent months and if you are still on the fence this is the video for you if you are new to this channel welcome for a bit of context I'm a developer with more than 10 years of front-end experience during this time I got a chance to work with a wide variety of libraries and Frameworks but I mostly consider myself a react guy these days the front-end space is in constant change and some of the new tools the community is releasing these days are pretty mind-blowing solidjes is part of the new wave of UI libraries that are changing the way we think about web apps and I see it as a real alternative to established Frameworks such as react moving forward without further Ado let's jump right into it first and foremost I love how simple everything is in solid let's take a look at the basic solid component and I'll show you how smart the team behind solid was about all these For Better or Worse we are close to the 15-year Mark in modern front-end development and some patterns or techniques emerge as best practices regardless of your framework reference as an FYI I might be subjective but I consider October 2010 when angularjs and backbone were first released the beginning of the modern front-end development era back to the code templating using jsx is one of those things that gained traction for all the right reasons while the mix of JavaScript and HTML might look a bit weird in the beginning jsx turned out to be flexible and Powerful especially since there aren't any special templating Concepts elements or directives you need to know at the end of the day jsx is still playing JavaScript so you can simply use if the conditionally render elements or array maps to iterate through lists also note that solid components are plain JavaScript functions returning jsx this is a concept popularized by react and I appreciate solid is not Reinventing the wheel here if something works well and the community is on board with it there is no reason to change it ok so until now we've seen that just like react solid apps are built using function components and jss what are the differences then well I'll mention the lack of the virtual dump first this might sound unusual especially since all the big Frameworks like angular or react are using this abstraction but again solid is focused on Simplicity the need for a virtual Dome arrives from the poor performance of the real Dawn in recent years however browsers drastically improve their strategies of working with the Dom the resulting performance gains are more than enough to allow libraries to directly alter the real Dom so the virtual Dom obstruction became a redundant additional layer with very few use cases by dropping the virtual Dom solid is smaller and has a code base more targeted on the actual needs of web apps the second thing solid Excel set is reactivity signals are the building blocks here and it is extremely straightforward to work with them you can Define signals by using the create signal hook and you can build new constructs that depend on signals by wrapping them in functions the resulting expressions are called derived signals on top of signals solid offers Observer implementation called effects these can keep track of signal values by subscribing to them during the function execution anytime the signal is changed the effect function will be run while the signal plus effect combination gives you a straightforward solution for reactivity not everybody got it right I discussed previously about the newer libraries building on top of knowledge gained by older tools while also getting the chance to address some of the existing pitfalls you can find more details on this topic in the video linked in the top right corner I'll not get into many details here but I want to mention the example of solids reactivity compared to reacts rendering and Reconciliation process while in solid only effects and derived signals we run when signals are changed in react the entire component function re-runs every time state or properties are updated this leads to a lot of overhead side effects and constraints you have to keep in mind while building your app solid reactivity is synchronous in other words code is evaluated line by line and the Dom is updated immediately up according to the changes in our example in the on-click Callback totem triggers are updated as follows first the set member name line is evaluated as a result the Dom name element is updated then set last click line is evaluated as a result the Dom time element is updated this is fine for most cases but solid allows you to batch updates together and this is useful if the values are related before moving to the third solid feature I really like I want to briefly mention memos most of the time composing derived signals is sufficient however it is sometimes beneficial to Cache values in order to reduce duplicated work we can use memos to evaluate a function and store the result until its dependencies change next let's discuss control flows I think the prices of jsx already and in all cases this is going to be enough to cover your needs however the solid team decided to add a couple of helper components in the library which provides some better tooling for some of the most common problems take for instance show component which is pretty intuitive instead of using the inline end operator to conditionally render elements you can use show and have your code be a bit more clean and clear in the same line the switch component allows you to map multiple possible outcomes by using the match Clauses also the component provides a fallback option so it's easier for you to logically group code together while we are at this topic let's also use the four component to refactor our list of members as the array changes the four component updates or moves items in the Dom rather than recreating them it's time now to get serious and discuss one of the leading causes of headaches and frustrations for developers when building front-end apps State Management long story short this was painful to handle until react introduced the flux pattern then various third-party Solutions with various degrees of complexity were developed you'll find a wide range of State managers in the market but solely decided to take out the decision paralysis from the picture so this despite its small size the library comes with a store solution out of the box solid stores are proxy objects whose properties can be tracked and can contain other objects which automatically became wrapped in proxies themselves we can create a store using the create star function which takes an initial State wraps it in a store and returns a read-only proxy object and the setter function the setter function is flexible as well we can easily pass an object as the argument or a function that accesses the previous state and Returns the new state as a quick FYI setting a value to undefined will delete the entry from the store before moving on I want to also mention the option to use the context API to avoid passing that around this props it is react inspired and it is useful for sharing signals and stores one of the basic use cases of web apps is exchanging data with a backend usually through some sort of API a nice little feature to help with this is the create resource utility function resources are special signals designed specifically to handle async loading and their purpose is to wrap using values in a way that makes them easy to interact with some knowledge distributed execution model this is the opposite to a single weight or generators which provide sequential execution models let's look at an example to clarify this use case usually our members list will be populated from a server request how would we do this in a traditional manner well we probably use a lifecycle method like the unmount to run some code when the component is added to the Dom inside that component we'd make a fetch call to the API and when the response is received the signal is updated via the center now let's refactor this using Create resource this is extremely simple let's assign the members value to the result of the create resource function and we'll pass the HTTP call as the parameter that's it convenient right create resource can also be called with two arguments a signal and an async fetch method whenever the signal is changed the fetch method will be called again and the member detail is updated accordingly okay so these are the five Great features of solid but there is another major topic I want to discuss before wrapping things up this is also a good point to remind you to subscribe to this channel if you want to stay up to date on various topics in the dev world so solidges is great and all but its ecosystem was missing one big piece a meta framework for those who don't know meta Frameworks are a set of libraries and tools bundled together in a final product aim to improve both the app performance and the developer experience react has next view has nox and now solid has solid start in the top right corner I'm linking a video where I'm looking at solid start in more detail but for this video I'll just mention that it is a great framework that provides useful tools such as routing solution server side rendering a powerful CLI and more if you found this video useful please consider liking it until next time thank you for watching

Channel: Awesome

Views: 12,265

Keywords:

Id: m8jq1_v4RfY

Length: 8min 49sec (529 seconds)

Published: Fri Dec 23 2022