Skit is a client-only framework that also runs on the server, so I built a backend API for TodoMVC to create lists and store tasks, which are loaded with a list ID stored in a cookie.
If you save a task a refresh the page, the task will be rendered on the server side. If you create a new task, it will be rendered in the browser, using the same Handlebars template (frontend/root/public/List_item.html).
The backend is a Google App Engine project written in python that creates a super simple REST interface for creating and modifying task lists. This is not a skit project, but necessary to demonstrate what skit is designed for.
The frontend is a simple skit project that renders the task list and calls into the backend API to update the task list state. This example uses no client-side libraries besides skit. In real life you might want to use React or some kind of other client-side data-layer / sync framework; I just wanted to show what was possible without any additional libraries.
Files of note:
- root/library/TodoAPIClient.js - this is the API client for the backend mentioned above. Note that it uses skit.platform.net module to issue HTTP calls from the server and browser.
- root/public/List.js - this is the task list page. this is responsible for fetching the task list and rendering it, as well as the logic around updating the list. Note that it uses skit.platform.cookies to store/read cookies on the server and client.
- root/public/completed/Completed.js - This (and Active.js) inherit from List.js, showing the exact same page as List.js but at a different URL and with fewer items displayed.
To run locally:
- Install the Google App Engine launcher for python here: Google App Engine downloads
- In App Engine Launcher, import an existing project (the
backendfolder) and press play - Make sure your API host port matches the port in
library/TodoMVCClient.js - In the
frontendfolder, run the skit project
To run and install the skit project:
$ cd frontend
$ npm install
$ ./node_modules/.bin/skit run
Voilà, there you have it.