Svelte

Svelte is a compiling method that effciently consolidates functions/animation/UX with easy to use code.
The result is a very fast shipping code that is easily rendered, without overhead of a library and dependency.

Core Concepts

Variables

Use the variable in regular HTML for Declarative Modeling.

Events

Use Local/Nested/Fowarded events with hierarchy in File Tree Publishing

Loops

Svelte Animation

Fade - opacity 0-1
Blur - opacity and blur
Fly - x and y along with opacity
Slide - heightScale - start: scale, opacity
Draw - SVG Clipping on spline
Animation also supports: 3D/Canvas, SVG, Vanilla CSS without need to State Manage, does not rely on DOM mount and unmount. Is Semantic and WCAG Accessible.

Svelte Examples

Svelte and Three JS

Svelte and interactive three js library with html based button and physics.

Create Vite app/select Svelte. Example use case: Digital Twin and IP Model for Power over the Internet Machine triggers.

Vite

npm install threlte

npm install @threlte/core @threlte/extras three

Github Sample Threlte Install

Svelte Kit

Svelte does not have a Router and does not render on Server Side.
Svelte Kit is a File System with Multi Page Application/Naming Tree.

Recent breaking changes to File System/Naming/Loading.

Svelte Kit is a beta release.

YSL - Native Vanilla Compile Enterprise Builds

Svelte

Breaking Changes

File System / Naming Convention updates before 1.0 Release
‍
Prefixs have been updated to make the logic simpler
-legibility improvements
-files are organized into more functional groupings
‍

link to article

Svelte File System

Skeleton

getting started

npm init svelte@next [nameofyourproject]
‍‍
Follow stepped choices
Skeleton Project
No Typescript
ES Lint
Prettier

cd [nameofyourproject]

npm install
‍

SVelte UI Kits

https://medium.com/mkdir-awesome/8-popular-svelte-ui-components-d2a3e43d70c3#db83

Advantages of Svelte over React

You can use regular CSS
You don't need to add "extras": useState, useEffect, useContext
You can Semantically declare Elements with Scoped CSS: Nav, Body, Section, Image, List, etc... these are natively ADA compliant
Context and Nested Templates can automate Usability and Functions, manage token based (PCI and HIPAA) integration to Web 3 Wallets and to API first E Commerce APIs, Inventory Management, Returns and Real Time CRM integrations.
Server Side Data can be modeled in File System or with Async Vanilla Fetch
CSS is Scoped by default, and Sass/Tailwind can be added simply to File System
Forms are native and use regular Crud Operations, Handle Error, Success, Received with UI and Redirects
Gated and oAuth protected routes can be dynamically set
File Based Routing and Architecture / Natural Organization without knowing how to "code"
Watch and State Moderation / Webhooks can be managed per collection, html, svg, css, div, section, js. Workflow is element based.

Loading Data

FETCH/ASYNC IS BUILT IN AS A NATIVE COMMAND

File System and Client/Server specification Data Loading is part of Svelte Kit Logic / File Naming Structure

Xano

Xano is a serverless DATA modeling API endpoint.

It is a headless "database" and API, with ability to Function Model with logic and "store" data with mutations, logic, and calcuation at an IP endpoint, that is not dependent on Cloud or database, and fees associated with transformation / upload to centralized database.

Xano is "Serverless" Database substitution, can be used as "middleware", temporary storage, logic gating, webhook and strategy warehouse.

"Users" Collection can mirror ERP/Sales User IDs and or replace, CRM/ERP, bridge E Com to Marketing Data (with real time synchronization, or chron time and logic based data hooks/transfer logic.

Similar to a PIM, ERP, WMS, Inventory manager, it can be set up to replace any of these functions.

The fee/function and serving cost of a XANO database is "included" in an Enterprise friendly single fee. All data is stored at IP making it more secure than a standard database. Logic and Deployment can include Horizontal Scaling, Geo Fencing, Personalized Gating. Comparison Case Study: AWS/Graph CMS and Headless PIM cost to serve: $30,000 a month for 30,000 rows/records and 90 Gig of storage. Conversion to Xano/unlimited APIs and background task with horizontal scaling/and GIT based webhooks for faster JS compile/serving and client side services $200 a month. Fee is not based on size of data. Unlimited APIs and Functions can be scaled with unlimited models to SSL secure frontends supported and webhooked on Netlify/Vercel - free ledger based deployment with GIT version management.

Usage can be in tandem or as a "replacement' to a standalone database.

CSV files can be loaded into a Schema and or "webhooked" to synchronize with data with Edge/Functions and Conditional Logic.

Xano can be used at API or Provision to an on Prem Enterprise Data source. It is PCI/ACID vetted, HIPAA and Crypto Compliant. This is done without any capital costs and data can horizontally scale to multiple channels immediately. These Channel Managers can include middleware connection between CGI/Inventory/E Com/ERP/EDI/PIM/Ledgers with version control in REAL TIME, at minimal cost.

Data is unlimited, scales in real time, and packages include API loads with "Background Functions" at interval pushes to rate limited Data Streams.

PCI/HIPAA/ISO Security

SAMPLE PIM SCHEMA MAP

API ENDPOINT (URL-CAN BE A CURL WITH TOKEN HEADER ENTITLEMENT)

Functions are Declarative and not dependent on State Trees. Cache and Data Logic can be "Reasoned" without compile dependency.

ADD FUNCTIONS/GATING TO GRAPHQL QUERY/STORE WITH LOGIC LINKED GIT BASED WEBHOOKS

"State" and "Store" are Declarative HTML/Functions with regular client/server calls: Create, Get, Post, Delete, Replace. "Mutations", "Render", "Cache", are simply done with Vanilla execution and can align with Native Svelte idioms.

Return API fetches to static rendered "front end" with higher order context and order of operations built with logical build steps and UI States. Render with non destructive GIT based file / naming updates.

ADDITIONAL SCHEMA/RELATIONAL ENDPOINTS

Additional Data Management can be "reasoned about" and functions can serve in synchronization or on a schedule, without breaking or compromising security of "live database". Token secure exchanges can be managed with simple Front End Low Code Tools and File Systems (11ty, Astro, Svelte, Webflow - with API synched publishes). Webflow Forms have "state, regex, and validation" built in, with ADA compliance tree shaking and code linting and evaluation at composition, no need for plugins and higher order context hoisting.

‍

Free to use, instant setup, equal to greater security as Salesforce-Integrated Demandware, Marketing, Sales APIs/AEM/SAP. Scales, with SSL and Background Task Moderation.
‍

CAN BE ADDED ENHANCED AND UPDATED IN REAL TIME, OR ON A SCHEDULE. Logic and schedule are easily managed with WYSWYG tools.

Scales horizontally, with easy to manage functional and logic settings. Editor and Data can be accessed with role based row level security.

Cost and Fee to Serve and Maintain Data is a single all in 1 cost. Compared to Cloud Based Fees that are designed around amount of data exchanged.

‍

Efficiency and Enterprise Friendly Pricing make this a "no brainer", when evaluating Enterprise Grade Cost and Requirements. All endpoints are SSL and Token secure.

Svelte Kit Params

File naming and Folder Structure define Collection Naming and Dynamic UI/UX publishing in real time.

Load API endpoint to Svelte File System. Use Xano URL/with Logic Gating/Secure Keys in Xano. Publish "Stacks" of GIT enabled Ledger and Version to Deployment and logic enabled UX structures.

Publish with GEO/Language preferences at "Edge" and Global Scaling.

Can include APIs: Weglot, Stripe/Payment Gateway, Magic Link/oAuth, Wallet Enabled Identification/Entitlement. Wordpress, SAP, Drupal GraphQL REST can also be used as a Data Source that updates in real time.

Declare Vairiables, and use Declaratively

Edge Computing

New Paradigm in Deployment and Usability Standards.

A quick definition is: "is any type of computer program that delivers low latency nearer to the requests."

Deployment with CI CD Scaling and IP endpoint logic, creates a new opportunity with Strategy and Functional Requirements.

Database, File System, should be Decentralized. Efficient Fast Static Data that is streamlined and "minified" with logic based compiles.
‍