2019-06-12 JUN

CodeSandbox.io

... is a Platform-as-a-Service that allows you to develop projects using server-side JS frameworks such as Gatsby, Next.JS, Gridsome, Node, etc. in addition to client-side frameworks.

More info: https://codesandbox.io/docs/#what-is-codesandbox

• First impressions: Looks like a fork of VS Code application.
• Projects are termed "Sandboxes"
• Deploy to "serverless" hosting platforms such as Azure, Zeit, etc.
• Filesystem allows you to host static files, such as images.
  • 20 mb limit for free tier, all files are public.
  • 500 mb & private file hosting for "Patrons" / donators . Upload limits are per-user.
• JS dependency management - add with a click of a button.
• Github integration - create new repo with code, auto-save, commit and push code changes.
• Deploy public https website – e.g., https://jdwg9.codesandbox.io/
• "Live sessions" allow smiultaneous collaborative editing (click the "Double People" icon)

Activity: Build project using Svelte.js in CodeSandbox

Link to project - https://codesandbox.io/s/hardcore-shaw-cb7fq

Svelte Props

... allow consumers of a web component to modify the component. (https://svelte.dev/docs#script)

• Keyword is "export let"

Discussion - What are the typical components of a Web App?

PRESENTATION LAYER:

• Web Server (or cloud-based: PaaS) - e.g.,Zeit, Heroku, etc.

DATA LAYER:

• Database Server (or cloud-based: DBaaS) - e.g., MongoDB Atlas;
• CDN - (Content Delivery Network) - serve images, videos, etc. - https://www.techradar.com/news/the-best-cdns-of-2018

Of note - Sanity.io seems to combine elements of a database and a CDN - https://www.sanity.io/why-sanity