{"id":5825,"date":"2021-02-01T20:23:29","date_gmt":"2021-02-01T20:53:29","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=5825"},"modified":"2021-02-02T20:05:20","modified_gmt":"2021-02-02T20:35:20","slug":"javascript-svelte-a-very-interesting-web-framework","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=5825","title":{"rendered":"JavaScript: Svelte \u2014 A Little Guide to Start Studying This Interesting Framework"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><strong>Digging and looking around about JavaScript alternatives, I came across&nbsp;<a class=\"editor-rtfLink\" href=\"https:\/\/svelte.dev\" target=\"_blank\" rel=\"noopener\">Svelte<\/a>.<\/strong><\/p>\n<p><strong>When starting studies from scratch about a subject you get many alternatives.<br>\nThis is marvelous, but the setback is to get the right path to start getting the grips with it as fast as possible.<\/strong><\/p>\n<p><strong><span data-preserver-spaces=\"true\">Since many pages tell us more than one or three, I&#8217;ve decided to share my notes from my researches and initial procedures to start using this very interesting framework.<\/span><\/strong><\/p>\n<p><strong><span data-preserver-spaces=\"true\">Therefore, all content here comes from someplace and all places are properly referenced.<br>\nI do not make up or create solutions in this kind of approach. I just share paths to get acquainted faster.<br>\n<\/span><\/strong><\/p>\n<p><strong><span data-preserver-spaces=\"true\">The only intention here is just to put together some notes, sharing summaries, and offering a faster start about the subject that may save you time.<\/span><\/strong><\/p>\n<p><strong><span data-preserver-spaces=\"true\">So, in this post, no content is created from my own.<br>\nIt is a little humble guide to guides. \ud83d\ude42<br>\n<\/span><\/strong><\/p>\n<p><span data-preserver-spaces=\"true\">&nbsp;<\/span><\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f85834396a7\" class=\"ez-toc-cssicon-toggle-label\"><span class><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\" \/><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\" \/><\/svg><\/span><\/span><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-69f85834396a7\" checked aria-label=\"Toggle\"><nav><ul class=\"ez-toc-list ez-toc-list-level-1 \"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#ABOUT_SVELTE\" title=\"ABOUT SVELTE\">ABOUT SVELTE<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#Does_It_Disappear\" title=\"Does It Disappear?\">Does It Disappear?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#TUTORIALS_PROCEDURES\" title=\"TUTORIALS, PROCEDURES\">TUTORIALS, PROCEDURES<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#First_Steps\" title=\"First Steps\">First Steps<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#1a_Guide_to_the_Svelte_Framework\" title=\"1a. Guide to the Svelte Framework\">1a. Guide to the Svelte Framework<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#1b_Svelte_o_que_e_vantagens_desvantagens_e_cases\" title=\"1b. Svelte: o que \u00e9, vantagens, desvantagens e cases\">1b. Svelte: o que \u00e9, vantagens, desvantagens e cases<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#1c_Front-end_com_Compilador_Svelte\" title=\"1c. Front-end com Compilador Svelte\">1c. Front-end com Compilador Svelte<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#2a_Sveltes_IntroductionBasics\" title=\"2a. Svelte&#8217;s Introduction\/Basics\">2a. Svelte&#8217;s Introduction\/Basics<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#2b_Refining_concepts_and_Code_Source\" title=\"2b. Refining concepts and Code Source\">2b. Refining concepts and Code Source<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#3_Frequently_Asked_Questions\" title=\"3. Frequently Asked Questions\">3. Frequently Asked Questions<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#Extending\" title=\"Extending\">Extending<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#1_Svelte_Typescript_SCSS_Webpack_Starter_Kit\" title=\"1. Svelte Typescript SCSS Webpack Starter Kit\">1. Svelte Typescript SCSS Webpack Starter Kit<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#About_Yarn\" title=\"About Yarn\">About Yarn<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#2_Sapper_Extending_the_Framework\" title=\"2. Sapper: Extending the Framework\">2. Sapper: Extending the Framework<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#3_Implementing_SSHTLS_%E2%80%93_HTTS_Protocol\" title=\"3. Implementing SSH\/TLS &#8211; HTTS Protocol\">3. Implementing SSH\/TLS &#8211; HTTS Protocol<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#4_Routing\" title=\"4. Routing\">4. Routing<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#INSTALLING_ADDITIONAL_RESOURCES_ANDROID-SDK_NPX_TNS\" title=\"INSTALLING ADDITIONAL RESOURCES: ANDROID-SDK (NPX, TNS )\">INSTALLING ADDITIONAL RESOURCES: ANDROID-SDK (NPX, TNS )<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#COMMUNITIES\" title=\"COMMUNITIES\">COMMUNITIES<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/ultering.com\/it4us\/?p=5825\/#REFERENCES_AND_DOCUMENTATION\" title=\"REFERENCES AND DOCUMENTATION\">REFERENCES AND DOCUMENTATION<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"ABOUT_SVELTE\"><\/span>ABOUT SVELTE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><em>(Texts selected from many sources, as all topics)<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"fontstyle0\">Svelte is an alternative to web frameworks like React, Vue, and Angular. Like those, Svelte can be used to build entire web apps. It can also be used to create custom elements that can be used in existing web apps implemented<br>\nwith other frameworks.<\/span><\/p>\n<p>Svelte was developed by Rich Harris, who formerly worked at <span class=\"fontstyle2\">The Guardian <\/span><span class=\"fontstyle0\">and is currently at <\/span><span class=\"fontstyle2\">The New York Times<\/span><span class=\"fontstyle0\">.<\/span><\/p>\n<p>Harris previously created the Ractive web framework (<span class=\"fontstyle0\">https:\/\/ractive.js.org\/<\/span><span class=\"fontstyle0\">), which is used at <\/span><span class=\"fontstyle2\">The Guardian <\/span><span class=\"fontstyle0\">and inspired parts of Vue. He also created the Rollup module bundler, which is an alternative to Webpack and Parcel.<\/span><\/p>\n<p>Svelte provides a different approach to building web apps than some frameworks. While frameworks like React and Vue do the bulk of their work in the user&#8217;s browser while the app is running, Svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla JavaScript. Instead of using a tool during the running process, it\u2019s compiled to vanilla JS at the building stage so the application requires no dependencies to start.<\/p>\n<table class=\"table\">\n<thead>\n<tr>\n<th style=\"width: 50%;\">Svelte &#8211; No Virtual DOM<\/th>\n<th style=\"width: 50%;\">Other Framework with Virtual DOM<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Loading the page<\/td>\n<td>Loading the page<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;Build the DOM<\/td>\n<td>Build the DOM and Virtual DOM<\/td>\n<\/tr>\n<tr>\n<td>Render the page using pure JS<\/td>\n<td>Render the page using the framework&#8217;s lib<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>The outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience of the modern tooling ecosystem.<\/p>\n<p>Svelte sticks closely to the classic web development model of HTML, CSS, and JS, just adding a few extensions to HTML and JavaScript. It arguably has fewer concepts and tools to learn than some of the other framework options.<\/p>\n<p>It&#8217;s main current disadvantages are that it is a young framework \u2014 its ecosystem is therefore more limited in terms of tooling, support, plugins, clear usage patterns, etc. than more mature frameworks, and there are also less job opportunities. But it&#8217;s advantages should be enough to make you interested to explore it.<\/p>\n<div class=\"notecard note\">\n<p><strong>Note<\/strong>: recently Svelte has added&nbsp;<a class=\"external\" href=\"https:\/\/svelte.dev\/blog\/svelte-and-typescript\">official TypeScript support<\/a>, one of its most requested features. We&#8217;ll look at it later on in this tutorial series.<\/p>\n<\/div>\n<p>Svelte has not yet received the attention it deserves.<br>\nWhen it is mentioned, the focus is typically on its ability to produce bundled code that is significantly smaller than the alternatives. However, Svelte makes many tasks easier, including defining components, managing component state, managing application state, and adding animation.<\/p>\n<p><span class=\"fontstyle0\">Svelte apps have smaller bundle sizes than equivalent apps created with other web frameworks. This is achieved by compiling the application code to a single, optimized JavaScript file that includes a very small amount of framework<br>\ncode.<\/span><\/p>\n<p>Svelte is a library trying to bring modularity into the front-end game. It keeps that modularity not only in separating different components but also in isolating the logic, view, and the template.<\/p>\n<p><strong> <span class=\"fontstyle0\">Svelte is a web application compiler implemented in TypeScript. It is not a runtime library.<\/span> <\/strong><\/p>\n<p><span class=\"fontstyle0\">For example, the todo app presented later has a bundle size that is 13% of the size of an equivalent React app.<br>\nThese apps can be found at <\/span><span class=\"fontstyle0\">https:\/\/github.com\/mvolkmann\/svelte-todo <\/span><span class=\"fontstyle0\">and <\/span><a href=\"https:\/\/github.com\/mvolkmann\/reacttodo.\"><span class=\"fontstyle0\">github.com\/mvolkmann\/reacttodo<\/span><\/a><span class=\"fontstyle0\"><a href=\"https:\/\/github.com\/mvolkmann\/reacttodo.\">.<\/a><br>\n<\/span><\/p>\n<p><span class=\"fontstyle0\">The website at <\/span><a href=\"https:\/\/www.freecodecamp.org\/news\/a-realworld-comparison-of-front-end-frameworks-withbenchmarks-2019-update-4be0d3c78075\/\"><span class=\"fontstyle0\">www.freecodecamp.org\/news\/a-realworld-comparison-of-front-end-frameworks-withbenchmarks-2019-update-4be0d3c78075\/ <\/span><\/a><span class=\"fontstyle0\">catalogs statistics on building a real world web application using many web frameworks. <\/span><\/p>\n<p><span class=\"fontstyle0\">The reported gzipped app size in KBs for some popular choices include:<br>\nAngular + ngrx: 134<br>\nReact + Redux: 193<br>\nVue: 41.8<br>\nSvelte: 9.7<br>\n<\/span><\/p>\n<p><span class=\"fontstyle0\">Some web frameworks, including React and Vue, use a virtual DOM to optimize rendering changes. When components re-render, the framework builds a new version of the DOM in memory and then compares it to the previous version. Only the differences are applied to the actual DOM. While this is faster than updating everything in the actual DOM, it does take time to build a virtual DOM and compare it to the previous one.<\/span><\/p>\n<p><span class=\"fontstyle0\">Svelte provides reactivity without using a virtual DOM. It does this by tracking changes to top-level component variables that affect what each component renders and only re-rendering those parts of the DOM when changes are detected. This contributes to good performance.<\/span><\/p>\n<p><span class=\"fontstyle0\">Svelte dramatically simplifies component and application state management. Contributing features include context, stores, and module context, each of which is covered in detail later.<\/span><\/p>\n<p>Svelte provides runtime warnings for accessibility issues. For example, <span class=\"fontstyle2\">&lt;img&gt; <\/span><span class=\"fontstyle0\">elements that have no <\/span><span class=\"fontstyle2\">alt <\/span><span class=\"fontstyle0\">attribute are flagged.<\/span><\/p>\n<p><span class=\"fontstyle0\">Svelte does not currently support using TypeScript but work to add this is underway. See <\/span><a href=\"https:\/\/github.com\/sveltejs\/svelte\/issues\/1639\"><span class=\"fontstyle0\">github.com\/sveltejs\/svelte\/issues\/1639<\/span><\/a><span class=\"fontstyle0\">.<\/span><\/p>\n<p><strong><span class=\"fontstyle0\">Svelte Native supports developing mobile apps.<br>\nIt builds on NativeScript.<\/span> <\/strong><\/p>\n<h3><\/h3>\n<h3><span class=\"fontstyle0\">Does It Disappear?<br>\n<\/span><\/h3>\n<p><span class=\"fontstyle2\">Some say that Svelte disappears once an app is built.<br>\nThe Svelte library is mostly defined by <\/span><span class=\"fontstyle3\">.js <\/span><span class=\"fontstyle2\">files in the <\/span><span class=\"fontstyle3\">node_modules\/svelte <\/span><span class=\"fontstyle2\">directory.<br>\nThe main functions are defined in <\/span><span class=\"fontstyle3\">internal.js <\/span><span class=\"fontstyle2\">which is currently around 1400 line of code.<br>\nOther library files are used for specific features.<br>\nThese include <\/span><span class=\"fontstyle3\">easing.js <\/span><span class=\"fontstyle2\">, <\/span><span class=\"fontstyle3\">motion.js <\/span><span class=\"fontstyle2\">, <\/span><span class=\"fontstyle3\">register.js <\/span><span class=\"fontstyle2\">, <\/span><span class=\"fontstyle3\">store.js <\/span><span class=\"fontstyle2\">, and <\/span><span class=\"fontstyle3\">transition.js <\/span><span class=\"fontstyle2\">.<\/span><\/p>\n<p>Entering <span class=\"fontstyle3\">npm run build <\/span><span class=\"fontstyle2\">produces files in the <\/span><span class=\"fontstyle3\">public <\/span><span class=\"fontstyle2\">directory including <\/span><span class=\"fontstyle3\">bundle.js<\/span><span class=\"fontstyle2\">.<br>\n<\/span><\/p>\n<p><strong><span class=\"fontstyle2\">Svelte library functions that are used by the app are copied to the top of <\/span><span class=\"fontstyle3\">bundle.js<\/span><\/strong><span class=\"fontstyle2\"><strong>. <\/strong><\/span><\/p>\n<p>So Svelte library code doesn\u2019t disappear, it is just very small compared to other web frameworks.<\/p>\n<p><em>@FROM:<br>\nJavaScript &#8211; Svelte &#8211; Web Development Make Easier [REF23313].pdf<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"TUTORIALS_PROCEDURES\"><\/span>TUTORIALS, PROCEDURES<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Some suggestions to begin coding, but there are many other alternatives.<br>\nCheck the last section: &#8220;References and Documentation&#8221;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"First_Steps\"><\/span>First Steps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"d40f\" class=\"fo df fp av cu fq fr fs ft fu fv fw fx fy fz ga gb gc gd ge gf gg gh gi gj gk gl\"><span class=\"ez-toc-section\" id=\"1a_Guide_to_the_Svelte_Framework\"><\/span><a href=\"https:\/\/medium.com\/@teimurjan\/guide-to-the-svelte-framework-41d9f84d18ff\" target=\"_blank\" rel=\"noopener\">1a. Guide to the Svelte Framework<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Begin, first with this post.<br>\nThe author has a good approach offering the core basics of theory and practice, Svelte modularity and implementation.<br>\nFast approach. Good.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1b_Svelte_o_que_e_vantagens_desvantagens_e_cases\"><\/span><a href=\"https:\/\/blog.cubos.io\/svelte-o-que-e-vantagens-desvantagens-cases\/\">1b. Svelte: o que \u00e9, vantagens, desvantagens e cases<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The author shows concepts and pros and cons. Good.<br>\nPortuguese (Brazil) but you may use the translator.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1c_Front-end_com_Compilador_Svelte\"><\/span><a href=\"https:\/\/inside.contabilizei.com.br\/front-end-com-compilador-svelte-a54ccbfbe5a6\">1c. Front-end com Compilador Svelte<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The concepts are exposed and&nbsp; analized comparing with Vue.<br>\nInteresting. Helps to enlarge the vision.<br>\nPortuguese (Brazil) but you may use the translator.<\/p>\n<p>&nbsp;<\/p>\n<p>NOTE: if you read the posts from the links above, because they are short, when you get to the next it will turn the subject much easier.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2a_Sveltes_IntroductionBasics\"><\/span><a href=\"https:\/\/svelte.dev\/tutorial\/basics\">2a. Svelte&#8217;s Introduction\/Basics<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Extending the overview from 1a step.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2b_Refining_concepts_and_Code_Source\"><\/span><a href=\"https:\/\/svelte.dev\/examples\" target=\"_blank\" rel=\"noopener\">2b. Refining concepts and Code Source<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Follow the examples from Stelve&#8217;s site to refine the initial approach.<br>\nThis is an excelent source to consult code snippets, howtos, etc.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"3_Frequently_Asked_Questions\"><\/span><a href=\"https:\/\/svelte.dev\/faq\">3. Frequently Asked Questions<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Extending\"><\/span>Extending<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"1_Svelte_Typescript_SCSS_Webpack_Starter_Kit\"><\/span><a href=\"https:\/\/github.com\/ritesh404\/svelte-typescript-scss-webpack-starter\">1. Svelte Typescript SCSS Webpack Starter Kit<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Extending the knowledge with other technologies.<br>\nSvelte app using yarn and containing svelte 3.x, typescript, scss, eslint, prettier, whatwg-fetch, webpack.<\/p>\n<p>RESULT: works perfectly.<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-5833\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/02\/rin557_frontpage.jpg\" alt width=\"600\" height=\"148\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/02\/rin557_frontpage.jpg 600w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/02\/rin557_frontpage-300x74.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-5833 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20148%22%3E%3C%2Fsvg%3E\" alt width=\"600\" height=\"148\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20148%22%3E%3C%2Fsvg%3E 600w\" sizes=\"(max-width: 600px) 100vw, 600px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/02\/rin557_frontpage.jpg 600w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/02\/rin557_frontpage-300x74.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/02\/rin557_frontpage.jpg\"><\/p>\n<h5><span class=\"ez-toc-section\" id=\"About_Yarn\"><\/span>About Yarn<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>Yarn is Fast. It caches every package it has downloaded, so it never needs to download the same package again.<br>\nIt also does almost everything concurrently to maximize resource utilization.<br>\nThis means even faster installs.<\/p>\n<p>It is not uncommon to want to migrate a project from npm to yarn. So how exactly does one migrate? The first thing to note is that both yarn and npm can consume the same package.json format, and both of them can install any package from the npm registry.<\/p>\n<p><a href=\"https:\/\/www.w3resource.com\/yarn\/migrating-from-npm.php\">migrating from npm<\/a><\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/yarn\">www.npmjs.com\/package\/yarn<\/a><\/p>\n<p><a href=\"https:\/\/shift.infinite.red\/npm-vs-yarn-cheat-sheet-8755b092e5cc\">npm vs yarn cheat sheet<\/a><\/p>\n<p><a href=\"https:\/\/www.w3resource.com\/yarn\/migrating-from-npm.php\">www.w3resource.com\/yarn\/migrating-from-npm.php<\/a><\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_Sapper_Extending_the_Framework\"><\/span><a href=\"https:\/\/sapper.svelte.dev\">2. Sapper: Extending the Framework<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.<\/p>\n<p>Unlike single-page apps, Sapper doesn&#8217;t compromise on SEO, progressive enhancement or the initial load experience \u2014 but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.<\/p>\n<p><a href=\"https:\/\/svelte.dev\/blog\/sapper-towards-the-ideal-web-app-framework\">Read the introductory blog post<\/a>&nbsp;to learn more.<\/p>\n<p><a href=\"https:\/\/ezdevs.com.br\/desenvolvendo-uma-aplicacao-com-sapper-e-svelte\/\">Svelte + Sapper<\/a> : a good summary, faster to begin.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"3_Implementing_SSHTLS_%E2%80%93_HTTS_Protocol\"><\/span>3. Implementing SSH\/TLS &#8211; HTTS Protocol<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/59829088\/how-can-i-run-a-svelte-sapper-app-over-https-ssl\">How can I run a Svelte\/Sapper app over HTTPS\/SSL?<\/a><\/p>\n<h3><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"4_Routing\"><\/span>4. Routing<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Check <a href=\"https:\/\/github.com\/pateketrueke\/yrv\">github.com\/pateketrueke\/yrv<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"INSTALLING_ADDITIONAL_RESOURCES_ANDROID-SDK_NPX_TNS\"><\/span>INSTALLING ADDITIONAL RESOURCES: ANDROID-SDK (NPX, TNS )<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>PRE-REQUISITES: assuming that <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> and &nbsp;npm or yarn (see &nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Tools_and_testing\/Understanding_client-side_tools\/Package_management\">Package management basics<\/a>) are already installed.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Procedure based on <a href=\"https:\/\/www.tutorialspoint.com\/nativescript\/nativescript_installation.htm\">svelte tutorial &#8211; tutorialspoint<\/a><\/p>\n<p>1. CLI setup: install tns.<br>\nnpm install -g nativescript<\/p>\n<p>2. tns help<br>\ntns<br>\ntns &#8211;help<\/p>\n<p>3. Env setup<\/p>\n<p>&#8211; Windows dependency: installs android-sdk:<br>\nExecute the below command in your windows command prompt as administrator &#8211; NOT powershel prompt:<br>\n@powershell -NoProfile -ExecutionPolicy Bypass -Command &#8220;iex ((new-object net.webclient).DownloadString(&#8216;https:\/\/www.nativescript.org\/setup\/win&#8217;))&#8221;<\/p>\n<p>If pointing to:<br>\n<em>https:\/\/www.nativescript.org\/setup\/win<\/em><br>\ndownloads the following file, that enables you to inspect before installation:<br>\n<em>native-script.ps1<br>\n<\/em><br>\nTo run it inside a WINDOWS POWERSHELL console against the production branch (only one supported with self-elevation), turn off &#8220;Mcafee Real-time scan&#8221; and use:<br>\nstart-process -FilePath PowerShell.exe -Verb Runas -Wait -ArgumentList &#8220;-NoProfile -ExecutionPolicy Bypass -Command iex ((new-object net.webclient).DownloadString(&#8216;https:\/\/www.nativescript.org\/setup\/win&#8217;))&#8221;<br>\n@SEE: documentation inside the script: native-script.ps1<\/p>\n<p>4. Verify dependencies.<br>\ntns doctor<\/p>\n<p>5. If just the case, to switch the default install home at:<br>\nC:\\Android<\/p>\n<p><strong>Locations &#8211; Where the stuff is installed<\/strong><br>\nC:\\Android<\/p>\n<p><strong>Envvars:<\/strong><\/p>\n<p>Use:<br>\nsysdm.cpl<\/p>\n<p>ANDROID_HOME=C:\\Android\\android-sdk<br>\nPath=<br>\nC:\\Android\\android-sdk\\tools<br>\nC:\\Android\\android-sdk\\platform-tools<br>\nC:\\Android\\android-sdk\\tools\\bin<\/p>\n<p>C:\\ProgramData\\chocolatey<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"COMMUNITIES\"><\/span>COMMUNITIES<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/sveltebrasil.dev\/\">WELCOME TO THE <\/a><a href=\"https:\/\/sveltebrasil.dev\/\">SVELTE BRASIL <\/a><a href=\"https:\/\/sveltebrasil.dev\/\">COMMUNITY&nbsp;<\/a><br>\nAccess our channels to answer questions, learn news and interact with the entire Svelte community here in Brazil (ahh, it is just beginning).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"REFERENCES_AND_DOCUMENTATION\"><\/span>REFERENCES AND DOCUMENTATION<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>NOTE: the link order in this section has no meaning, no prioritization.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"article__body\">\n<div class=\"article__content\">\n<div class=\"md-viewer\">\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Tools_and_testing\/Client-side_JavaScript_frameworks\/Svelte_getting_started\">Getting Started With Svelte &#8211; Mozilla<\/a><\/p>\n<p><a href=\"https:\/\/formvalidation.io\/guide\/examples\/integrating-with-svelte\/\">formvalidation.io\/guide\/examples\/integrating-with-svelte\/<\/a><\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Tools_and_testing\/Client-side_JavaScript_frameworks\/Svelte_getting_started\">developer.mozilla.org\/en-US\/docs\/Learn\/Tools_and_testing\/Client-side_JavaScript_frameworks\/Svelte_getting_started<\/a><\/p>\n<p><a href=\"https:\/\/www.snowpack.dev\/tutorials\/svelte\">www.snowpack.dev\/tutorials\/svelte<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/svelte-native.technology\/\">svelte-native.technology\/<\/a><\/p>\n<p><em>JavaScript &#8211; Svelte &#8211; Web Development Make Easier [REF23313].pdf<\/em><\/p>\n<p><a href=\"https:\/\/svelte.dev\/blog\/svelte-3-rethinking-reactivity\"> <span class=\"fontstyle0\">&#8220;Rethinking reactivity&#8221;<\/span><\/a><span class=\"fontstyle0\"><br>\n<\/span><span class=\"fontstyle0\">This is a talk by Rich Harris at &#8220;You Gotta Love Frontend (YGLF) Code Camp 2019&#8221;. It describes the motivations behind Svelte 3 and provides a brief introduction.<\/span><\/p>\n<p><a href=\"https:\/\/svelte.dev\">Svelte home page<\/a><span class=\"fontstyle0\"><br>\n<\/span><br>\n<a href=\"https:\/\/svelte.dev\/tutorial\"><span class=\"fontstyle0\">Svelte Tutorial<\/span><\/a><span class=\"fontstyle0\"><br>\n<\/span><br>\n<a href=\"https:\/\/svelte.dev\/docs\"><span class=\"fontstyle0\">Svelte API<\/span><\/a><span class=\"fontstyle0\"><br>\n<\/span><br>\n<a href=\"https:\/\/svelte.dev\/examples\"><span class=\"fontstyle0\">Svelte Examples<\/span><\/a><span class=\"fontstyle0\"><br>\n<\/span><br>\n<a href=\"https:\/\/svelte.dev\/repl\"><span class=\"fontstyle0\">Online Svelte REPL<\/span><\/a><span class=\"fontstyle0\"><br>\n<\/span><span class=\"fontstyle0\">This is great for trying small amounts of Svelte code. It can also display generated code and save code for sharing and submitting issues.<\/span><\/p>\n<p><a href=\"https:\/\/svelte.dev\/blog\">Svelte Blog<\/a><span class=\"fontstyle0\"><br>\n<\/span><br>\n<a href=\"https:\/\/discordapp.com\/invite\/yy75DKs\"><span class=\"fontstyle0\">Discord chat room <\/span><\/a><span class=\"fontstyle0\"><br>\n<\/span><br>\n<a href=\"https:\/\/github.com\/sveltejs\/svelte\"><span class=\"fontstyle0\">Svelte GitHub repository<\/span><\/a><\/p>\n<p id=\"d40f\" class=\"fo df fp av cu fq fr fs ft fu fv fw fx fy fz ga gb gc gd ge gf gg gh gi gj gk gl\"><a href=\"https:\/\/medium.com\/@teimurjan\/guide-to-the-svelte-framework-41d9f84d18ff\">Guide to the Svelte Framework<\/a><\/p>\n<p><a href=\"https:\/\/sveltebrasil.dev\/#\/cheatsheet\">On-line Cheat Sheet<\/a><\/p>\n<p>&nbsp;<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>&nbsp; Digging and looking around about JavaScript alternatives, I came across&nbsp;Svelte. When starting studies from scratch about a subject you get many alternatives. This is marvelous, but the setback is to get the right path to start getting the grips with it as fast as possible. Since many pages tell us more than one or &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=5825\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;JavaScript: Svelte \u2014 A Little Guide to Start Studying This Interesting Framework&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-5825","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/5825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5825"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/5825\/revisions"}],"predecessor-version":[{"id":5906,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/5825\/revisions\/5906"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}