"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", h3: "h3", h4: "h4", img: "img", li: "li", p: "p", pre: "pre", ul: "ul", ..._provideComponents(), ...props.components }, {BookmarkCard} = _components; if (!BookmarkCard) _missingMdxReference("BookmarkCard", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["SolidJS is a true reactive library that allows you to use JSX for your frontend projects. The SolidJS is a true reactive library that allows you to use JSX for your frontend projects. In this blog post, I'll share my first impressions about the ", _jsx(_components.em, { children: "SolidJS UI library" }), " and its reactive primitives. "] }), "\n", _jsx(_components.p, { children: "I like the concept of reactivity when building frontend projects. Despite its name, React is not a truly reactive library. I also like the Svelte because of its reactivity. However, I realized that writing projects with Svelte are not so scalable like React projects because React and JSX provide great modularity." }), "\n", _jsxs(_components.p, { children: ["My first backend experience was with Django. I also used ", _jsx(_components.a, { href: "https://www.cbsofyalioglu.com/post/django-and-modern-js-libraries-svelte/", children: "Django and Svelte" }), " for the first time experiencing a reactive library. If you are interested, you can also read"] }), "\n", _jsx(BookmarkCard, { title: "AdonisJs and SolidJS", description: "Using SolidJS as a frontennd of AdonisJS", image: "/posts/covers/adonis-solidjs.webp", url: "https://www.cbsofyalioglu.com/code/adonisjs-solidjs/" }), "\n", _jsx(_components.h3, { children: "Using SolidJS in AdonisJS App - Design & Development" }), "\n", _jsx(_components.p, { children: "Reading Time: 2 minutes This blog post shows how to integrate SolidJS frontend library with AdonisJS backend framework." }), "\n", _jsx(_components.p, { children: "However, SolidJS offers the best of both worlds." }), "\n", _jsx(_components.p, { children: "I'm currently not planning to do a real project with SolidJS until I get to use it." }), "\n", _jsx("aside", { children: _jsxs(_components.p, { children: ["Currently, I'm building an e-commerce store that sells wall posters ", _jsx(_components.a, { href: "https://www.opendigitalgallery.com", children: "Duvar posterleri" }), " along with ", _jsx(_components.a, { href: "https://www.filizguvenlik.com.tr", children: "İzmir güvenlik kamerası" }), ", and the right time for the SolidJS is now."] }) }), "\n", _jsx(_components.h2, { children: "Introduction" }), "\n", _jsxs(_components.p, { children: ["OK, let's dive into the topic. Before reviewing SolidJS, it is better to get familiar with the concepts. I'll shortly talk about ", _jsx(_components.em, { children: "What are reactive systems?" }), " and ", _jsx(_components.em, { children: "what are those reactive primitives?" }), "."] }), "\n", _jsx(_components.h3, { children: "What are reactive systems?" }), "\n", _jsxs(_components.p, { children: ["According to ", _jsx(_components.a, { href: "https://www.reactivemanifesto.org/", children: "The Reactive Manifesto" }), ", reactive systems are responsive, resilient, elastic, and message-driven. We call these Reactive Systems."] }), "\n", _jsx(_components.p, { children: "Systems built as Reactive Systems are more flexible, loosely coupled, and scalable. This makes them easier to develop and amenable to change." }), "\n", _jsx(_components.p, { children: "They are significantly more tolerant of failure, and when failure does occur they meet it with elegance rather than a disaster." }), "\n", _jsx(_components.h3, { children: "What Reactive Systems do" }), "\n", _jsx(_components.p, { children: "There are numerous reactive libraries in many programming languages like SolidJS in JS." }), "\n", _jsx(_components.p, { children: "Reactive systems must react to data change. Generally, these changes occur when new data receives or old updates." }), "\n", _jsx(_components.h3, { children: "Characteristics of Reactive Programming" }), "\n", _jsx(_components.p, { children: "The reactive manifesto defines the key characteristics of it like that:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Responsive: Those systems respond in a timely manner. Here of course timely will differ depending upon the application and domain." }), "\n", _jsx(_components.li, { children: "Resilient. Reactive systems stay responsive in the face of failure." }), "\n", _jsx(_components.li, { children: "Elastic. As the workload grows the system should continue to be responsive." }), "\n", _jsx(_components.li, { children: "Message Driven. Information is exchanged between elements of a reactive system using messages. This ensures loose coupling, isolation and location transparency between these components." }), "\n"] }), "\n", _jsx(_components.h3, { children: "What are the reactive primitives of SolidJS?" }), "\n", _jsxs(_components.p, { children: ["In SolidJS, the author of the library ", _jsx(_components.a, { href: "https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf", children: "Ryan Carniato" }), " defines them as much like network primitives rather than JavaScript's primitives. As you will see later, Signals are basically observables."] }), "\n", _jsx(_components.h2, { children: "Installation of SolidJS Template" }), "\n", _jsxs(_components.p, { children: ["You can easily install a starter ", _jsx(_components.em, { children: "SolidJS" }), " template with degit. You can also check other official templates from here: ", _jsx(_components.a, { href: "https://github.com/solidjs/templates", children: "SolidJS Official Templates" }), ". I prefer a JS template rather than a TypeScript."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/solidjs-starter-template-direcotry.webp", alt: "SolidJS directory" }) }), "\n", _jsx(_components.p, { children: "It is very similar to React in many cases. I will check some component rendering processes'." }), "\n", _jsx(_components.p, { children: "In this post, I am going to explore SolidJS in an introductory manner. I'll also create a Counter component first and check its re-render process." }), "\n", _jsx(_components.h2, { children: "A Reactive JavaScript Library: SolidJS" }), "\n", _jsx(_components.h3, { children: "A) Reactive primitives: createSignal" }), "\n", _jsx(_components.p, { children: "SolidJS has some basic reactive primitives, and Signals are one of them. It looks like it is a \"useState\" alternative of React Hooks. One difference to the \"useState\" hook is that a Signal returns two functions: a getter and a setter. Here is the official example of creating a signal:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "createSignal function takes an initial value and returns an array with an access and update function." }), "\n", _jsx(_components.li, { children: "You should execute the getter function (access) in order to get the value." }), "\n", _jsx(_components.li, { children: "You can pass function to update function (set function). In this function, you can access the previous state also." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const [getValue, setValue] = createSignal(initialValue);\n\n// read value\ngetValue();\n\n// set value\nsetValue(nextValue);\n\n// set value with a function setter\nsetValue((prev) => prev + next);\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/solidjs-create-signal-component.webp", alt: "Solid JS createSignal\"" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "import { createSignal } from \"solid-js\";\n\nfunction Counter({ initial }) {\n const [count, setCount] = createSignal(initial || 0);\n\n return (\n

\n\t {/* Notice the usage of count! It is a function*/}\n

Count: {count()}

\n );\n}\n" }) }), "\n", _jsx(BookmarkCard, { url: "https://www.cbsofyalioglu.com/blogging/best-blogging-sites/", image: "/posts/best-blogging.webp", title: "The List of Best Blogging Platforms", description: "The list of best blogging platforms for your creative works. The list includes free and paid platforms." }), "\n", _jsx(_components.h4, { children: "1) Component State Access and Update" }), "\n", _jsxs(_components.p, { children: ["SolidJS call the state elements as signals. However, I prefer to use state rather than signal. Let's make a Counter component within the App component. Fill the ", _jsx(_components.code, { children: "App.jsx" }), " file as follows:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/SolidJS-component-state-change.webp", alt: "SolidJS change state" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "import logo from \"./logo.svg\";\nimport styles from \"./App.module.css\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n /**\n * CHECKPOINT\n * if the App component renders\n * it will print to console\n */\n //\n console.log(\"App component rendered.\");\n\n return (\n

\n \n

\n );\n}\n\nfunction Counter(props) {\n const [count, setCount] = createSignal(props.initial || 0);\n\n /**\n * CHECKPOINT\n * if the Counter component renders. it will print to console.\n * Also, I put another print statement for the count function.\n */\n //\n console.log(\"Counter component rendered.\");\n console.log(\"Counter component count value: \", count());\n\n return (\n

\n {/* Notice the usage of count! It is a function*/}\n

Count: {count()}

\n \n \n

\n );\n}\n\nexport default App;\n" }) }), "\n", _jsx(_components.p, { children: "Let's check the browser and the first render of SolidJS. As you see, there is no extra component render. If it were React, we should have seen many times \"Counter component rendered\" text on the console." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs-reactivity.gif", alt: "SolidJS's Reactivity" }) }), "\n", _jsx(_components.h4, { children: "2) Parent Component State Access and Update" }), "\n", _jsx(_components.p, { children: "Let's make it further and pass the signal setter to the child component and use it from there. Change both App and Counter components like that:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/solidjs-changing-state-of-the-parent-component.webp", alt: "SolidJS change parent state" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function App() {\n /**\n * CHECKPOINT\n * if the App component renders\n * it will print to console\n */\n //\n const [appCount, setAppCount] = createSignal(0);\n console.log(\"App: count: \", appCount());\n console.log(\"App component rendered.\");\n\n return (\n

\n \n

\n );\n}\nfunction Counter({ initial, setAppCount }) {\n const [count, setCount] = createSignal(initial || 0);\n\n /**\n * CHECKPOINT\n * if the Counter component renders. it will print to console.\n * Also, I put another print statement for the count function.\n */\n //\n console.log(\"Counter component rendered.\");\n console.log(\"Counter component count value: \", count());\n\n return (\n

\n\n {/* Notice the usage of count! It is a function*/}\n

Count: {count()}

\n \n \n

\n\n {/* Buttons changes the signal value of its parent component */}\n \n \n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "As you see, there is not any component re-render. It's awesome.🥳" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/solidjs-change-state-of-parent-component.gif", alt: "SolidJS parent component state" }) }), "\n", _jsx(_components.h4, { children: "Don't use destructuring, if you need reactive props" }), "\n", _jsx(_components.p, { children: "One thing to keep in mind is that if you need a reactive prop, you shouldn't use destructuring." }), "\n", _jsxs(_components.p, { children: ["The example below is obtained from the official documentation. (", _jsx(_components.a, { href: "https://www.solidjs.com/guide#props", children: "See the details" }), ")"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "// Here, `props.name` will update like you'd expect\nconst MyComponent = (props) =>

{props.name}

;\n\n// This is bad\n// Here, `props.name` will not update (i.e. is not reactive) as it is destructured into `name`\nconst MyComponent = ({ name }) =>

{name}

;\n" }) }), "\n", _jsx(_components.h3, { children: "B) Reactive primitives: createEffect" }), "\n", _jsxs(_components.p, { children: ["As you supposed, ", _jsx(_components.code, { children: "createEffect" }), " is the equivalent of the ", _jsx(_components.code, { children: "useEffect" }), " hook of React. The official explanation and example are as follows:"] }), "\n", _jsxs(_components.p, { children: ["Creates a new computation that automatically tracks dependencies and runs after each render where a dependency has changed. Ideal for using ", _jsx(_components.code, { children: "ref" }), "s and managing other side effects."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "const [a, setA] = createSignal(initialValue);\n\n// effect that depends on signal `a`\ncreateEffect(() => doSideEffect(a()));\n" }) }), "\n", _jsxs(_components.p, { children: ["It's time to play with this function. The official example returns a function (doSideEffect) that takes state value as its argument. Even if the returning function doesn't take the state value as its argument but as an inner value, the ", _jsx(_components.code, { children: "createEffect" }), " function successfully makes a side-effect."] }), "\n", _jsxs(_components.p, { children: ["Let's add those to the ", _jsx(_components.code, { children: "App" }), " component."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: " // The function creates side-effect\n const changeTitle = (val) => (window.document.title = `#App: ${val}`);\n\n // effect that depends on signal `a`\n createEffect(() => changeTitle(appCount()));\n" }) }), "\n", _jsx(_components.p, { children: "We created a function (changeTitle) responsible for the side-effect. It takes a value and changes the document title according to that. It also takes the state value of the App component which is appCount. Your app component should look like this." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function App() {\n const [appCount, setAppCount] = createSignal(0);\n console.log(\"App: count: \", appCount());\n console.log(\"App component rendered.\");\n\n // The function creates side-effect\n const changeTitle = (val) => (window.document.title = `#App: ${val}`);\n\n // effect that depends on signal `a`\n createEffect(() => changeTitle(appCount()));\n\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["You'll easily differentiate that when the app renders the first time, the document title was ", _jsx(_components.code, { children: "App: 0" })] }), "\n", _jsx(_components.p, { children: "After, when I clicked and increased the appCount value, the document title also changed to the corresponding value. You'll also notice that there will be no component re-render." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/solidjs-create-effect.gif", alt: "SolidJS createEffect" }) }), "\n", _jsx(_components.h3, { children: "C) Reactive primitives: createMemo" }), "\n", _jsxs(_components.p, { children: ["This reactive primitive returns a function that returns a read-only derived signal. Its value is recalculated whenever the dependencies are updated. ", _jsx(_components.code, { children: "createMemo" }), " primitive is the equivalent of ", _jsx(_components.code, { children: "useMemo" }), " hook."] }), "\n", _jsx(_components.p, { children: "Edt the App component according to those:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: " // Add those to the App component\n // It recalculate the value whenever the dependencies are updates.\n const makeDouble = (val) => val * 2\n const doubleCount = createMemo(() => makeDouble(appCount()))\n console.log(\"doubleCount \", doubleCount());\n" }) }), "\n", _jsxs(_components.p, { children: ["Also, update the content of the App component. By doing this, we can see the ", _jsx(_components.code, { children: "doubleCount" }), " signal in work. You can also check the code location from the image below."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "

Double Count: {doubleCount()}

\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/solidjs/solidjs-creatememo.gif", alt: "SolidJS createMemo function " }) }), "\n", _jsx(_components.h3, { children: "D) Reactive primitives: createResource" }), "\n", _jsx(_components.p, { children: "This function creates a signal that is responsible for async requests. The official explanation and example are here:" }), "\n", _jsxs(_components.p, { children: ["Creates a signal that can manage async requests. The ", _jsx(_components.code, { children: "fetcher" }), " is an async function that accepts the return value of the source if provided and returns a Promise whose resolved value is set in the resource. The fetcher is not reactive so use the optional first argument if you want it to run more than once. If the source resolves to false, null, or undefined will not fetch. Also, ", _jsx(_components.code, { children: "loading" }), " and ", _jsx(_components.code, { children: "error" }), " are reactive getters and can be tracked."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const [data, { mutate, refetch }] = createResource(getQuery, fetchData);\n\n// read value\ndata();\n\n// check if loading\ndata.loading;\n\n// check if errored\ndata.error;\n\n// directly set value without creating promise\nmutate(optimisticValue);\n\n// refetch last request just because\nrefetch();\n" }) }), "\n", _jsx(_components.p, { children: "My first impressions about SolidJS are amazing. Up to this point, there is no overhead that you always face with React. I will be watching the development of SolidJS with interest." }), "\n", _jsxs(_components.p, { children: ["Next, I'll review ", _jsx(_components.a, { href: "https://www.cbsofyalioglu.com/code/styling-and-control-flow-in-solidj/", children: "Styling and Control Flow in SolidJS" }), "."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Count: {count()}

Count: {count()}

App Count: {appCount()}

Count: {count()}

App Count: {appCount()}

Double Count: {doubleCount()}