The final pitch for WITWorld by team Where In The World:

See the repository here.

The term “static site” comes with a lot of baggage. It feels like a relic of the early days of the internet, when static web pages were considered to “display the same information for all users, from all contexts” — phrasing that still sits on Wikipedia’s Static web page entry as of this writing.

So when we say that the the fundamental foundation of a JAMstack application is that it is centered around a static website, that’s sure to raise a lot of eyebrows. After all, the personalized, information-laden nature of today’s web seems to suggest static web pages to be a nonstarter.

That mindset has led to a proliferation of full stack developers. Bootcamps and curriculums all over preach the necessity of full stack skillsets like MERN (Mongo, Express, React, and Node).

There’s certainly value to such an approach — but there is another way.

Enter JAMstack. Its mission: empower the front-end engineer.

Better performance. Higher security. Easy scaling. All with just JavaScript, API’s, and Markup.

The need to learn a full stack of technologies like MERN to be able to produce valuable, technical apps is in the past. The vast majority of business use cases don’t need you re-inventing the wheel on the backend. Authentication is a solved problem. Accepting payments is a solved problem. And so on: you can focus on becoming a CSS and JavaScript wizard to build your app and slap together tried, true, and secure API’s to fill in the gaps.

Every new API brings about a world of new use case possibilities — each more and more dynamic than the last.

And indeed, team Where In The World set out to showcase exactly those possibilities.

Yes, that’s our cheesy slogan for what WITWorld brings to the table.

As Jeff, Tyler, Gabe, and I met over breakfast (thank you, GitHub, for the bottomless supply of delicious goods), we spitballed ideas for what we could work on.

Right after the post-breakfast keynote ended, Jeff whispered to us:

And we were off to the races.

One of the best decisions we made early on was to pick our North Star, cut the fat, and focus singularly on one goal. That goal — as it should be in most every hackathon — was: let’s build the steps we need for the demo. Nothing more, nothing less.

That means this will not be a production-ready application. It means our API keys are hardcoded into our client side code. It means our app blows up if any one of the players decides to hit the “Back” button on their browser. The CSS spacing is off. Our color pallet was a week late for Halloween. Spaghetti, but it works? Shipped it.

Our repository is publicly available, but please, please don’t look at our code. It’s a mess and a half. The fact that our last commit came in at 5:56PM when the code complete deadline was 6:00PM says enough.

Netlify’s painless webhook-based CI setup had this 5:56PM commit live on https://witworld.live/ a minute later

Early on, we had a rough idea for how WITWorld would technically come into being. It was clear that GraphQL subscriptions would have to be at the core of it: sockets were the best way to make a “live” web app, and GraphQL has neatly packaged the concept into a “subscription”.

Just one problem: none of us had ever written a GraphQL subscription before.

Hasura to the rescue.

Hasura provides “a GraphQL server and event triggers over a Postgres database in minutes” and was one of the hackathon’s sponsors. Converting our app from the typical read-write push-pull model into realtime over websockets was a matter of, in the words of Hasura’s documentation:

And a few lines of Apollo config to pop in Hasura’s convenient web socket endpoint.

const graphqlUri = 'https://where-in-the-world-hq.herokuapp.com/v1alpha1/graphql';

const splitUri = graphqlUri.split('//');
const wsLink = new WebSocketLink({
  uri: 'wss://' + splitUri[1],
  options: {
    reconnect: true
  }
});

That’s just one example. We experienced this simple “2 lines of code and XYZ major feature is ready to go” paradigm over and over again:

Not to mention all the little FOSS npm libraries we used so that we didn’t spend too much time figuring out what latitude and longitude actually mean, among other pieces of glue.

Let’s not forget how much work has gone into modern browsers like Chrome and Firefox, or the people responsible for the Netlify-Slack webhooks that alerted us every time our build failed, or the industry-shifting presence of React itself. Even tools like Heroku that we touched for a single click to deploy a Hasura instance — it’s a testament to how impressive they are that they operate so smoothly with us hardly realizing their major role.

The best part: none of the above costs a single dollar to use. Not on the scale of a hackathon anyway.

(Left to right) Tadas, Gabe, Jeff, and Tyler. GitHub’s Octocat was evidently watching over us.

For the rest of the weekend, had any one of these scenarios not fallen our way, we probably wouldn’t be talking much about WITWorld today:

I could go on. The weekend was a roller coaster, and yet time and time again, things just fell into place.

As we don’t have concrete plans for the future of WITWorld, the immediate future will see us cleaning up the codebase, setting up an MIT license and some structured Issues, and pushing it to the point of being a reasonable public showcase of JAMstack technology.

Contributors of all skill levels are more than welcome! We’d love to keep you in the loop whether you want to contribute or just follow any progress. Join the mailing list.

In the early 2000’s, you needed to buy your own server rackspace to put up a website. AWS and other cloud providers had turned that concept on its head by

Huge thank-you’s go out to those involved with the hackathon:

With many, many more people behind the scenes.

Events like this hackathon and the corresponding JAMstack_conf are just the beginning. We look forward to the bright future of the JAMstack community!

Big thank-you to Jeff Appareti, Gabe Greenfield, and Tyler Vick for reviewing drafts of this post. And being an awesome team to spend the weekend with.