In my last post What excites me about JS in 2017 I wrote about the unique advantage JavaScript has among programming languages. It is the only language you can evaluate a library, component or framework running without having to download, compile and build it.
As the title suggest that article was written at New Year (I nearly did not publish it). I only published it in April because I was applying for jobs and was often asked about my view of the future of JS. The post has now had over 12,000 reads (thanks everyone that liked and followed).
Ives van Hoorne
One of the first commenters was Ives van Hoorne. He co-created codesandbox.io with Bas Buursma. I had been playing with CodeSandbox a few days earlier and really liked it. As developer it is especially rewarding when someone whose work you admire also likes you own.
This is a really inspiring article. It gave me a lot of ideas and new views for my current and future projects.
Great work, thanks!
When the comment arrived I had just returned from a 5 hour onsite interview at one of the big five tech companies. I opened up my email and saw I had homework exercise from a local startup. If I wanted a choice about which company to work for I would need to do the exercise that night.
The task was to create a currency conversion widget. You type in a value in Euros and it converts it to nine other currencies. If you clicked on any two currencies in succession it graphs Euro exchange rates over the last five days. It needed to consume a public API and it needed a working “back” button. So it needed routing and history. I wondered if could I use CodeSandbox for this.
I started out and expected I would have to bail and use a “real editor” at some point. But to my surprise in the early hours of the morning it was done.
I chose Code Sandbox because I wanted my assessor to respond very quickly to my homework. I did not want them to have to install or build anything. I also wanted them to be able to share my solution internally with as many people as possible on the team by simply sending a URL.
For me this was the first time I worked on what felt like a real project in an online editor. Bringing in npm dependencies via import, real routing and connecting to a real API.
I submitted on Friday morning and by the afternoon had an offer for an onsite interview on Monday. I felt the question was well thought out as it tested a wide variety of everyday frontend skills.
Living Documentation
In my work for my previous employer NCR Edinburgh I have been creating living documentation for a component library (NCR has been a great employer for me, they invested a lot in me and gave me so many opportunities to learn … thanks!). The docs enable developers to play with components live and edit their props. It is inspired by Formidable Labs documentation for Victory charts. To help with this task I created react-playground-styled (Egghead video below).
Egghead video click to play
The playground uses Bublé rather than Babel which is a much smaller download. It is themed with styled-components. Below as an example I’ve documented Elemental UI buttons (try editing the code):
While codesandbox.io is like an IDE running in the browser react-playground-styled is at the other end of the spectrum. It is designed to be as small, unobtrusive and responsive as possible, so as not break the flow of documentation. The code defaults to a proportional font to save horizontal space. I hooked it up to Webpack’s hot loading and used it to develop and document components in their various states (a bit like react-storybook). I could view it hot loading on a phone while developing. And the playground is so responsive it still works at 320px wide on an old iPhone:
Reader challenge 1: Develop a component library using styled-components and a component guide using react-playground-styled. Deploy the documentation using Now.sh or Github Pages (Drop a link in the comments).
Viral Documentation
There is one problem with GitHub Pages and Now deploys, they don’t lend themselves to spreading on social media. In GitHub the link between the ReadMe.md and the interactive GitHub Page is pretty tenuous. Have you ever found yourself searching the readme for the real docs link:
Both Ives and myself had been blown away by the viral power of Medium. One article on Medium gained more followers for me than a whole year on Twitter. This raised the question, what if we could document components on Medium.
So I started chatting to Ives to find out how he was doing his npm imports to see if I could add this to react-playground-styled. It turned out that (working with the creator of WebPackBin) he had created NPM Packager Service to do just that.
Less is More
As I thought about integrating NPM Packager into react-playground-styled. I realised I did not want to. React-playground-styled is just a component so all I really needed was a generic wrapper that accepted source code as a prop and installed the imports and rendered the code. Such a component could render my playground or anything else.
Embed.ly is a the service Medium uses to allow many kinds of embeds to be inserted into its articles. Medium only allows embeds via embed.ly (and many other sites also use embed.ly). I chatted to Ives about creating a service that takes a Gist and renders it to an embed.ly embed. After more thought we decided there was no point using a Gist as you cannot preview the results while developing it. Why not just use CodeSandbox to write the code and store it.
For my playground to work I needed the height of the enclosing iframe to change as the user enters new lines of code. React virtualized has some great code called AutoSizer for generating element resize events without using timers. Embed.ly allows postMessages containing height to be sent to the parent frame to say when content has changed height. It is meant for hooking up to window resize events, but we can abuse it for text entry. So I shared some proof of concept code with Ives. We borrowed the Auto Resizer code and hooked its events up to embed.ly’s postMessages in CodeSandbox. Try reformatting the JSX in the playground below onto multiple lines and watch the embedded playground grow.
What you see above is a hack, it still contains the whole of CodeSandbox rather than just the SPA. To use responsive height in CodeSandbox wrap the React root element as follows to prevent margin extending beyond the page body:
<div style=”padding: 1px”><div style=”margin: -1px”><div id=”root”></div></div></div>
Then goto the share button and check “Hide navigation bar” and “Auto resize” now copy and paste the Medium URL into an article and press enter. In the future CodeSandbox plans to allow you to publish each sandbox on its own subdomain. This will mean each sandbox can have its own private localstorage and IndexDB. It will allow users to sign up to API providers that require a domain. Having your own subdomain may even enable sandboxes to be monetized with attention tokens in the future. Brave payments for content providers are currently only at the domain level.
With the editor CodeSandbox embeds are only of interest to the 1% of people that are JS developers. But if you take away the editor and leave just the preview pane you are left with an application that might be interesting to everybody. You have general purpose tool embedding React components and Apps in social media.
Closing The Loop
You can build non trivial applications in CodeSandbox and deploy them via Medium and other social media sites.
E.g. This in an app for checking how your crypto currency investments are doing. It fetches data from CoinMarketCap’s API. Try adding and editing coins and amounts on the blank row (e.g. BTC, ETH, ETC, BAT, STEEM etc):
Flippening is when the market cap of Ether surpasses that of Bitcoin. At the time of writing it has not happened but by the time you read this it may have. If I were writing a blog post on the subject my PNG pie chart would soon be out of date. It is fairly trivial to fork the Crypto Calculator above to show how close we are to the Flippening. Having live data can drive return visits to a blog post:
This voting App is using Firebase as a backend. It uses anonymous auth to stop you voting twice:
We are just scratching the surface. We could create mailing list subscriptions, shopping carts, donation boxes, payment flows, domain registration, comment sections, live text chat or WebRTC video streaming.
These apps are even easier for beginners to develop or adapt [fork] online than with desktop editors and the command line. There is no need to learn:
- npm
- Git
- Webpack
- create-react-app
- hosting and deployment
Interestingly CodeSandbox allows you to download an npm startable version of your app (using create-react-app). It would be a small step to have this automatically deployed via Now.sh. It would be great if there was a tighter integration so it could be done with a single click from the web.
Then you would not need to be a “full stack developer” to release a widget or a SPA. When you remove the build system and dev set up it opens up developing simple React components to a new audience:
- UX designers
- Graphic designers
- Business analysts
- School pupils
Reader Challenge 2: Create a neat CodeSandbox designed to be embeded in an article and drop a link in the comments.
Education
The developer experience on Windows for JS has been quite poor due to its DOS based shell, case insensitive file names, backslashes in paths and lack of symlinks. ChromeOS has been taking over education but lacks a terminal in normal user mode.
If Code Sandbox could deploy using Now then school kids using Windows and ChromeOS could deploy real websites and applications. They would not need to use educational languages or create programs just for assessment.
When I look back at my time as a bedroom coder at school it was the most creative period of my life. At school nothing is unthinkable. I would love to see what would happen if kids and teens were competing, creating and spreading crazy apps on social media (something would be bound to stick).
Challenge 3: Write a Medium article with some CodeSandboxes examples and exercises that a school teacher can use to plan a lesson. The lesson should inspire and challenge pupils to develop their first web app. Drop the URL in the comments.
Enterprise
At NCR I have been creating a component library. At the same time, some of my colleagues are creating public APIs. Code Sandbox is a great way for third parties to consume these two things and turn them into a bespoke widget they could then publish into their portal.
Some of the pushback I have had on styled-components is that customers want to tweak CSS with their own stylesheets or need to create additional mark up in a consistent style, but they only have developers with CSS and HTML skills but not React. When you removing npm, babel, webpack etc developing with JSX and styled-components is not very different to CSS and HTML.
Challenge 4: Encourage your company to release its React UI library on public npm and to place a component guide and API guide on the web. Publish a Medium article announcing a hackathon where employees and third parties consume your APIs and component library in CodeSandbox.io to create awesome things on the web. Drop a link to the Medium article in the comments below.
To be Continued
In this article I covered some of the things that are possible when a code editor runs on the web and can deploy to the web. But we also need bitmap and SVG editors, video sequencers, audio editors and 3D model editors that can do the same. On top of this we need a realtime data layer and UI system that makes it easy to combine the together in arbitrary ways. So I would love to see comments from people interested in building out such an ecosystem.
I am contemplating writing a future instalment of this blog on Steemit.com. Steemit gives crypto attention tokens to authors and those that up vote their articles (i.e. esteem tokens). It shares the value of the social network with those that use it. Somehow at the time of writing the tokens have a market cap of $500M. This is weird because there is no advertising.
In the longer term I am interested in how authors of apps and articles can fund their creation. I would also like to explore how embeds can be used there. So if you would like to be informed about future articles please add your email below: