2a:null 2b:["$","title",null,{"children":"Alternative Execution Environments | Steve Oney | Observable"}] 30:T40e,md` ### A Minimal Express App #### Step 1. Initializing an Express app We will use the tool \`express-generator\` to quickly create an application skeleton. \`\`\`shell $ npx express-generator --no-view \`\`\` We can run this starter code with the following commands and access the app at http://localhost:3000/: \`\`\`shell $ npm install $ npm start \`\`\`

- \`./public\` stores the front-end code, which includes the \`index.html\` and the corresponding stylesheets, javascripts, and other static resources (e.g., images). - \`./bin/www\` is the main entry of the node.js app. It starts an HTTP server on port 3000 and stores it in the express instance defined in \`app.js\`. - \`app.js\` is the express instance. It defines two routes -- when users request localhost:3000/, it passes the request to the indexRouter defined in \`./routes/index.js\`; when users request localhost:3000/users, it passes the request to the usersRouter defined in \`./routes/users.js\`. `31:T6b3,md` #### Step 2. Implement the Interface for the Comment App Let's first implement the interface for the comment app. We will have a comment container that displays all the comments, and an input box for submitting comments. This is our revised \`index.html\`: \`\`\`html Comment

Comment

\`\`\` This is our \`./public/javascripts/comments.js\`: \`\`\`javascript const inputBox = document.getElementById('comment-input'); const commentsList = document.getElementById('comments-list'); inputBox.addEventListener("keyup", (e)=>{ if(e.key === "Enter") { addComment(inputBox.value); e.stopPropagation(); inputBox.value = ""; } }) const addComment = (content) => { const commentElement = document.createElement('li'); commentElement.textContent = content; commentsList.appendChild(commentElement); } \`\`\` What we have achieved so far is a pure front-end comment app. When users type contents in the comment box and hit the enter key, the comment will be displayed in the comment list. However, this application does not have memories. If another user opens the app or the same user refresh the website, they cannot see the previous comments. To make our app "remembering" the comment messages, we will need to send the comment message to our backend server and store it with a database or similar solutions.

`32:T8d5,md` #### Step 3. Communicate between backend and frontend We will use the [HTTP POST method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) and [G ET method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) to deal with the communication. Let's first create a backend router "submit" to handle the POST request. This is the \`app.js\`: \`\`\`javascript var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.post('/submit', (req, res) => { console.log(req.body); res.send({data: 'success'}); }); module.exports = app; \`\`\` We would also change the front-end javascript so that when a user hits the enter key, we send a post request to the backend. This is the \`./public/javascripts/comments.js\`: \`\`\`javascript const inputBox = document.getElementById('comment-input'); const commentsList = document.getElementById('comments-list'); inputBox.addEventListener("keydown", (e)=>{ if(e.key === "Enter") { submitComment(inputBox.value); addComment(inputBox.value); e.stopPropagation(); inputBox.value = ""; } }) const submitComment = (content) => { const url = "http://localhost:3000/submit"; const comment = { content }; const options = { method: 'POST', body: JSON.stringify(comment), headers: { 'Content-Type': 'application/json' } } fetch(url, options) .then(res => res.json()) .then(data => { console.log(data) }) } const addComment = (content) => { const commentElement = document.createElement('li'); commentElement.textContent = content; commentsList.appendChild(commentElement); } \`\`\` Since we change the backend code, we will need to stop the current \`npm start\` and execute \`npm start\` again. This time, when we hit the enter key, we would see \`Object {data:"success"}\` in browser's console, and \`{content: "typed comment"}\` in node's console. `33:T797,#### Step 4. Save data to a database In this step, we will work on the backend code to save data to a database. You can use whatever database you like. Some examples include [lowdb](https://github.com/typicode/lowdb), [MongoDB](https://docs.mongodb.com/drivers/node/current/), [Postgres](https://node-postgres.com/), and many more. For this exercise, we will implement our own **really simple** database. Create a file named `simple_log.js` with the following content: ```JavaScript const fs = require('fs'); module.exports = function SimpleLog(filename) { const value = []; try { fs.readFile(filename, (fileContent) => { try { value = JSON.parse(fileContent) } catch { console.error(`Error parsing \${filename}`); } }); } catch { console.error(`Error reading \${filename}`); } return { value, push: (data) => { value.push(data); fs.writeFile(filename, JSON.stringify(value), () => { console.log(`Wrote db to \${filename}`); }); } }; } ``` This is our updated `app.js`: ```javascript var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); const SimpleLog = require('./simple_log'); const db = new SimpleLog('db.json'); var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.get('/load', (req, res) => { res.send(db.value); }); app.post('/submit', (req, res) => { db.push(req.body); res.send({data: 'success'}); }); module.exports = app; ``` When we run the app, we will observe a `db.json` file in our local directory. When we submit a comment, the data will be stored in `db.json` file. `34:Ta41,// md` // #### Step 5. Load the Comment List When Refresh // Last but not least, we need to implement the logic of loading the comment list. This should take place whenever the page is refreshed. // Let's define a \`loadComments()\` function in our front-end javascript \`./public/javascripts/comments.js\`. This function would send a GET request to the backend server to pull the comment list. After getting the list, it would render the comment list. And this function is invoked when the page is loaded. // Here is the updated \`./public/javascript/comment.js\`: // \`\`\`javascript // const inputBox = document.getElementById('comment-input'); // const commentsList = document.getElementById('comments-list'); // inputBox.addEventListener("keyup", (e)=>{ // if(e.key === "Enter") { // submitComment(inputBox.value); // addComment(inputBox.value); // e.stopPropagation(); // inputBox.value = ""; // } // }) // const submitComment = (content) => { // const url = "http://localhost:3000/submit"; // const comment = { content }; // const options = { // method: 'POST', // body: JSON.stringify(comment), // headers: { // 'Content-Type': 'application/json' // } // } // fetch(url, options) // .then(res => res.json()) // .then(data => { // console.log(data) // }) // } // const addComment = (content) => { // const commentElement = document.createElement('li'); // commentElement.textContent = content; // commentsList.appendChild(commentElement); // } // const loadComments = () => { // const url = "http://localhost:3000/load"; // fetch(url) // .then(res => res.json()) // .then(data => { // data.forEach(ele => { // addComment(ele.content) // }) // }) // } // loadComments(); // \`\`\` // In our backend code, we create a \`./routes/load.js\` router to handle this logic. Here is the code for \`./routes/load.js\`: // \`\`\`javascript // var express = require('express'); // var wrapper = function(db) { // var router = express.Router(); // /* GET comment listing. */ // router.get('/', function(req, res, next) { // const value = db.get('comments').value(); // res.send(value); // }); // return router; // } // module.exports = wrapper; // \`\`\` // Ta-da!! Let's run the app, submit some comments, and refresh the page!! The history comments should be available after refreshing the page!! //

// ` ''35:Tb4f,md`### A Minimal Browser Plugin This tutorial (adapted from [MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)) walks through creating an extension for Firefox. The extension will insert a save button to every event posted at https://www.si.umich.edu/about-umsi/events?page=0. #### Step 1. Create the manifest. Extensions start with their manifest. Create a file called \`manifest.json\` and include the following code. \`\`\`json { "name": "Hello Umich", "version": "1.0", "description": "Build an extension that runs on Umich's websites", "manifest_version": 2 } \`\`\` The directory holding the manifest file can be added as an extension in developer mode in its current state. Next, let's try to load this extension to Chrome and Firefox. **Load Extension to Firefox** - Navigating to \`about:debugging#/runtime/this-firefox\` on Firefox - Click the \`Load Temporary Add-on\` button - Select the \`manifest.json\` file we created - From now on, if you want to apply new changes to the extension, you can click the reload button.

**Load Extension to Chrome** - Navigating to \`chrome://extensions\` - Enable Developer Mode by clicking the toggle switch next to Developer mode - Click the LOAD UNPACKED button and select the extension directory - From now on, if you want to apply new changes to the extension, you can click the reload button (the second right icon).

#### Step 2. Recognize the Umich domain Let's change our \`manifest.json\` to the following. \`\`\`json { "name": "Hello Umich", "version": "1.0", "description": "Build an extension that runs on Umich's websites", "manifest_version": 2, "content_scripts": [ { "matches": ["https://www.si.umich.edu/about-umsi/events*"], "js": ["myapp.js"] } ] } \`\`\` The most interesting key here is \`content_scripts\`, which tells the browser to load a script into Web pages whose URL matches a specific pattern. In this case, we're asking Firefox or Chrome to load a script called "myapp.js" into all HTTP or HTTPS pages served from "umich.edu" or any of its subdomains. Let's also create the "myapp.js" file. Give it this content: \`\`\`javascript console.log("this is the extension!!"); \`\`\` Now let's reload the extension, open the url https://www.si.umich.edu/about-umsi/events, and observe the console. #### Step 3. Insert the Save Button Let's change the "myapp.js" to the following. \`\`\`javascript eventsElements = document.querySelectorAll(".item-teaser") eventsElements.forEach(element => { const button = document.createElement('button'); button.textContent = "Save"; element.appendChild(button); }); \`\`\` This code piece will find all the event post elements and insert a save button. `36:T664,md` ### A Minimal React Native App Next, we will demonstrate a minimal working example of React Native. #### Step 1. Init the project \`\`\`shell $ npx react-native init myProject \`\`\` This will take a while if you are initiating a React Native app for the first time. You will see the following message after installing: \`\`\`shell Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "./myProject" && npx react-native run-android Run instructions for iOS: • cd "./myProject" && npx react-native run-ios - or - • Open myProject/ios/myProject.xcworkspace in Xcode or run "xed -b ios" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions. \`\`\` We will demonstrate how to simulate an iOS app. #### Step 2. Run the Application First, we will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies." To start Metro, run \`npx react-native start\` inside your React Native project folder: \`\`\`shell $ cd myProject $ npx react-native start \`\`\` #### Step 3. Start the Simulator Keep the previous terminal running, and open a new terminal. Run the following command to start the ios simulator. \`\`\`shell $ npx react-native run-ios \`\`\` Again, this is probably going to take a while. Be patient!

`37:[{"id":"98aae37c6f98fab0e367b288c425b2e815df91a72b61a2f94f3ae43441f8c9c01f17bf7313d2d60b38326af6857925af29a5a39d163de93c2f74b8f79d5f15f5","href":"https://static.observableusercontent.com/files/98aae37c6f98fab0e367b288c425b2e815df91a72b61a2f94f3ae43441f8c9c01f17bf7313d2d60b38326af6857925af29a5a39d163de93c2f74b8f79d5f15f5","name":"image@9.png","type":"image/png","lastModified":1616527505262.598,"size":605523},{"id":"4a78e9658343c2d5cdfb23671f061bb654ad01f4982364702535e4b690da50d704b914cdbf1f4f003b8c992c3398479d5ea3b62513f0b2832e710f6286f92134","href":"https://static.observableusercontent.com/files/4a78e9658343c2d5cdfb23671f061bb654ad01f4982364702535e4b690da50d704b914cdbf1f4f003b8c992c3398479d5ea3b62513f0b2832e710f6286f92134","name":"image@7.png","type":"image/png","lastModified":1616527505262.598,"size":136368},{"id":"1dd28b2f72f3aab5c18408b960d206d6727c17946b77e3623126e1473e7144753d40ddccee8dc9602871ad6436bdb19aba421501b5890ff632a83946971c65e1","href":"https://static.observableusercontent.com/files/1dd28b2f72f3aab5c18408b960d206d6727c17946b77e3623126e1473e7144753d40ddccee8dc9602871ad6436bdb19aba421501b5890ff632a83946971c65e1","name":"image@4.png","type":"image/png","lastModified":1616527505262.598,"size":286273},{"id":"6bada2424cb07101a0cf6fbc759410b7c7dbda4e2daa9c87d89d9fb080ed8ff0957f8ce9cea4c183e6520c1c58ded6971498382c94b7792b91026f030530456d","href":"https://static.observableusercontent.com/files/6bada2424cb07101a0cf6fbc759410b7c7dbda4e2daa9c87d89d9fb080ed8ff0957f8ce9cea4c183e6520c1c58ded6971498382c94b7792b91026f030530456d","name":"image@3.png","type":"image/png","lastModified":1616527505262.598,"size":712973},{"id":"245ddc4b184f802720c3822cef7801163aec4a78f2a0e4c3c3331393838fbf38f20b7ee1755cca79563e536089dc1540503d6957d5da29f072603793333f03bc","href":"https://static.observableusercontent.com/files/245ddc4b184f802720c3822cef7801163aec4a78f2a0e4c3c3331393838fbf38f20b7ee1755cca79563e536089dc1540503d6957d5da29f072603793333f03bc","name":"image@2.png","type":"image/png","lastModified":1616527505262.598,"size":890266},{"id":"830f1768d1b260cc95853acfcabf660a3418c5b0f825d1432e0a0e7b9c6a1f7d400be8f3d3b9a2a0b41ec51d9cd18ef99f9ea0a29ac1bde7940852c166703f4a","href":"https://static.observableusercontent.com/files/830f1768d1b260cc95853acfcabf660a3418c5b0f825d1432e0a0e7b9c6a1f7d400be8f3d3b9a2a0b41ec51d9cd18ef99f9ea0a29ac1bde7940852c166703f4a","name":"image@13.png","type":"image/png","lastModified":1616527505262.598,"size":1204601},{"id":"e4523fe211746dc5380c54457b09e7d5a310473ce6dbf4fb73f2c5564f54ada647d0b46d49d0289e6c8a809b47152359981d73e916612573e40aeec30b6f4ebe","href":"https://static.observableusercontent.com/files/e4523fe211746dc5380c54457b09e7d5a310473ce6dbf4fb73f2c5564f54ada647d0b46d49d0289e6c8a809b47152359981d73e916612573e40aeec30b6f4ebe","name":"image@12.png","type":"image/png","lastModified":1616527505262.598,"size":1129631},{"id":"177fe1cd90211fa2457acc87ac6f266bd96c181015f0af35babca3d1309716d36e1409e902cd56436a7d9a1a8286515577d8d961361f3eafec97694045560684","href":"https://static.observableusercontent.com/files/177fe1cd90211fa2457acc87ac6f266bd96c181015f0af35babca3d1309716d36e1409e902cd56436a7d9a1a8286515577d8d961361f3eafec97694045560684","name":"image@11.png","type":"image/png","lastModified":1616527505262.598,"size":608089},{"id":"781d6410cac70da93c1245ecd57f1bb55d0cebaef0054f9863c1bdb41aeead56b1a4c8cca3a4b337c3da5eae9f77b486c222b62a89548a1f281bdf571197fcb3","href":"https://static.observableusercontent.com/files/781d6410cac70da93c1245ecd57f1bb55d0cebaef0054f9863c1bdb41aeead56b1a4c8cca3a4b337c3da5eae9f77b486c222b62a89548a1f281bdf571197fcb3","name":"image@10.png","type":"image/png","lastModified":1616527505262.598,"size":841537},{"id":"b3394b62aa58495c09a11ef92ebb25bfc0049e4916ebad636ab1518b51a7ca3c5a356e361c600ec688651d7f9cda0429e9e21a6865838237e1e134e9a18565f5","href":"https://static.observableusercontent.com/files/b3394b62aa58495c09a11ef92ebb25bfc0049e4916ebad636ab1518b51a7ca3c5a356e361c600ec688651d7f9cda0429e9e21a6865838237e1e134e9a18565f5","name":"image.png","type":"image/png","lastModified":1616527505262.598,"size":827358}] 2e:{"id":"d5b4c96138b62be1","slug":"si-579-alternative-execution-environments","title":"Alternative Execution Environments","thumbnail":"e3dcec110415fda595bbaa2f7e0d106dfbf464ea1aa423bc9076333331762b45","access_level":"public","create_time":"$D2021-03-17T20:22:34.931Z","update_time":"$D2023-10-02T17:43:50.739Z","view_time":null,"first_public_time":"$D2021-03-17T20:22:43.999Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":63,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Alternative Execution Environments","cells":[{"id":0,"value":"md`# Alternative Execution Environments\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"toc();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"md`## Node.js\n\nNode.js is a back-end JavaScript runtime environment. It executes JavaScript code outside a web browser.\n\nActually, we have used Node.js in many senses. For example, the npm command runs in the node environment.\n\nIn web development, there is the differenciation between \"front-end\" and \"back-end\" where the \"front-end\" refers to the user interface and the \"back-end\" means the server, application, and database that work behind the scenes to deliver information to the user.\n\nLet's say that we want to build a comment app that stores the data on the backend. When a user opens the webpage, he can see the comments stored in history, while he can also leave new comment.\n\nNext, we will demonstrate how to create this comment app. We will use a Node.js web application framework [Express](https://expressjs.com/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`\n### 🦄 Source Code\n\nThe complete code can be found [here](https://github.com/soney/si-579/tree/master/lecture_alternative_environments/express-demo).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`\n### ✏️ Exercise\n- Extend the app with \\`faker.js\\` and \\`moment.js\\` so that it displays the username and created time associated with a comment\n- Store the username and created time into the database\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`\n## Electron\n[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`### A Minimal Electron App\nA basic Electron application needs just these files:\n\n- \\`package.json\\` - Points to the app's main file and lists its details and dependencies.\n- \\`main.js\\` - Starts the app and creates a browser window to render HTML. This is the app's main process.\n- \\`index.html\\` - A web page to render. This is the app's renderer process.\n\nLet's take a look at a minimal Electron app.\n\n#### Step 1. Clone the Quick Start repository\n\\`\\`\\`shell\n$ git clone https://github.com/electron/electron-quick-start\n\\`\\`\\`\n\n#### Step 2. Go into the repository\n\\`\\`\\`shell\n$ cd electron-quick-start\n\\`\\`\\`\n\n#### Step 3. Install the dependencies and run\n\\`\\`\\`shell\n$ npm install && npm start\n\\`\\`\\`\n\nYou should be able to see the following app running.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"// md`\n// ### More Examples\n// The repository [electron-api-demos](https://github.com/electron/electron-api-demos) shows a desktop app that interactively and with sample code demonstrates core features of the Electron API.\n\n// \\`\\`\\`shell\n// $ git clone https://github.com/electron/electron-api-demos\n// $ cd electron-api-demos\n// $ npm install\n// $ npm start\n// \\`\\`\\`\n\n//

\n// `\n''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"### Lemon Timer Electron App\nWe can extend our Lemon timer from problem set 7. To do this, we're going to use [Electron React Boilerplate](https://electron-react-boilerplate.js.org/), which does a lot of the React & TypeScript setup for us:\n\n```bash\ngit clone --depth=1 https://github.com/electron-react-boilerplate/electron-react-boilerplate lemon\n```\n\nThen to build a native application:\n\n```bash\nnpm run package\n```\n\nYou can browse the repository [here](https://github.com/soney/si-579/tree/master/lecture_alternative_environments/electron-todolist)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`## Browser Plugin\n\nMany browsers (e.g., Chrome and Firefox) support extensions (or add-ons).\nExtensions can modify the user interface or add some Web service functionality to your browser. \nFor example, extensions are used to block ads on Web pages, translate text from one language to another, or add pages to a third-party bookmark service.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"md`\n### 🦄 Source Code\n\nThe complete code can be found [here](https://github.com/soney/si-579/tree/master/lecture_alternative_environments/browser-plugin).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`\n### ✏️ Exercise\n\n1. Extend the minimal working extension example\n2. Implement a widget on the UMSI event page so that it shows all the saved events with titles, dates, and links\n3. Allow users to unsave the event\n4. Use LocalStorage to store the saved events so that users won't lose the content when they restart the browser.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`## AFrame\n\n[AFrame](https://aframe.io/) is a web framework for building 3D/AR/VR experiences.\nAFrame provides a number of good examples as learning resources.\n\nReference: https://aframe.io/docs/1.2.0/introduction/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`A-Frame can be developed from a plain HTML file without having to install anything. A great way to try out A-Frame is to remix the starter example on Glitch, an online code editor that instantly hosts and deploys for free. Alternatively, create an .html file and include A-Frame in the :\n\\`\\`\\`html\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n\\`\\`\\`\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`## React Native\n\n[React Native](https://reactnative.dev/) is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React 's framework along with native platform capabilities.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`\n## IDE Extension\n\nYou can also build IDE extensions with web technologies.\n\n### VSCode Extension\n\nIf you are interested in building a VSCode extension, you can first follow [this tutorial](https://code.visualstudio.com/api/get-started/your-first-extension) to get a sense of the building and debugging process.\n\nHere is a list of example extensions for VSCode: https://github.com/microsoft/vscode-extension-samples\n\n### JupyterLab Extension\n\nJupyterLab is an IDE for data science programming. JupyterLab allows users to build extensions on top of the IDE.\n\nIf you are interested in building a JupyterLab extension, [this tutorial](https://jupyterlab.readthedocs.io/en/stable/extension/extension_tutorial.html) would be the best to follow.\n\nHere is a list of example extensions for JupyterLab: https://github.com/jupyterlab/extension-examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2f:"$2e:body"