j: stone game_JAMstack的力量:4个陌生人如何在短短的周末内构建了一个互动的实时Game Show应用程序...

j: stone game

by Tadas Antanavicius

由塔达斯·安塔那维修斯(Tadas Antanavicius)

JAMstack的力量:4个陌生人如何在短短的周末内构建了一个互动的实时Game Show应用程序 (The power of JAMstack: How 4 strangers built an interactive live Game Show app in a short weekend)

问题:您将如何处理以下内容? (Question: What can you do with the following?)

  • Saturday + Sunday

  • 16 hours of brainstorm, design, and dev time

  • 4 strangers who met at breakfast on Saturday morning

    4个陌生人 谁在星期六早上早餐见面

  • Hacking space, free food, and a slew of hackathon goodies from the organizers of the freeCodeCamp/Netlify JAMstack 2018 Hackathon hosted at GitHub

    来自GitHub托管的freeCodeCamp / Netlify JAMstack 2018 Hackathon的组织者的黑客空间,免费食物和大量hackathon物品

答:网络上有功能的实时“ Game Show”应用程序。 (Answer: A functional live “Game Show” application on the web.)

  • Built on the backs of at least 18 significant free pieces of software (conservative estimate)

  • About 80 concurrent players in the live final demo

  • $4 total expenses (for a domain name)

    $ 4 总费用(用于域名)

  • One $500 grand prize from among the 28 teams and hundreds of participants with submissions

    28个团队中的500美元大奖 数百名参与者提交了意见书

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


“Game show” web application that presents curated photos of images from somewhere in the world to a live, participating audience. In each game, the audience is asked to pin the location where the photo was taken on a map. The closer a player is to the actual location, the higher on the leaderboard they place.

“游戏节目”网络应用程序,用于将来自世界各地的精选图片照片呈现给现场的参与观众。 在每个游戏中,要求观众将照片的拍摄位置固定在地图上。 玩家离实际位置越近,他们放置在排行榜上的位置就越高。

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.

术语“ 静态站点 ”带有很多负担。 当静态网页被认为“在所有上下文中为所有用户显示相同的信息”时,感觉就像是互联网的早期遗迹。在撰写本文时,短语仍然存在于Wikipedia的静态网页条目中。

So when we say that 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 that static web pages are non-starters.

因此,当我们说JAMstack应用程序的基本基础是它以静态网站为中心时,肯定会引起很多人的注意。 毕竟,当今网络的个性化,信息负载的性质似乎表明静态网页不是入门者。

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 (MongoDB, Express, React, and Node).

这种想法导致了全栈开发人员的泛滥。 整个训练营和课程都宣讲了诸如MERN(MongoDB,Express,React和Node)之类的全栈技能的必要性。

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


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

输入JAMstack。 其任务是: 授权前端工程师

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

更好的性能。 更高的安全性。 易于缩放。 全部都带有JavaScript,API和标记。

The need to learn a full stack of technologies like MERN to be able to produce valuable, technical apps is no longer the only way. The vast majority of business use cases don’t need you re-inventing the wheel on the back-end. 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.

不再需要学习像MERN这样的完整技术来生产有价值的技术应用程序。 绝大多数业务用例不需要您在后端重新发明轮子。 身份验证是一个已解决的问题。 接受付款是一个已解决的问题。 依此类推:您可以专注于成为CSS和JavaScript向导来构建您的应用程序,并将经过尝试,真实和安全的API拼凑在一起以填补空白。

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.


展示JAMstack,展示世界 (Showing off JAMstack, and showing off the world)

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 spit-balled ideas for what we could work on.


Here’s one. It’s one of those ideas that’s going to be either really good, or really, really bad. Do you guys know HQ Trivia? …

这是一个 这些想法要么真的好,要么真的很坏。 你们知道HQ Trivia吗?

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


Hey let’s call it “Where In The World”


And we were off to the races.


在黑客马拉松中,您正在演示 (At a hackathon, you’re building to demo)

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 hard-coded 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.

这意味着这将不是可用于生产的应用程序。 这意味着我们的API密钥被硬编码到我们的客户端代码中。 这意味着,如果任何一个玩家决定点击其浏览器上的“返回”按钮,我们的应用程序就会崩溃。 CSS间距已关闭。 我们的彩色托盘在万圣节晚了一个星期。 意大利面,但是有效吗? 发货了。

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:56 PM when the code complete deadline was 6:00 PM says enough.

我们的存储库是公开可用的 ,但是请不要看我们的代码。 一团糟。 当代码完成的最后期限是下午6:00时,我们的最后一次提交是在下午5:56进行的,这一事实已经足够了。

有了JAMstack,我们就可以站在巨人的肩膀上 (With JAMstack, we sit on the shoulders of giants)

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”.

早期,我们对WITWorld在技术上如何形成有了一个粗略的想法。 显然,GraphQL订阅必须是它的核心:套接字是制作“实时” Web应用程序的最佳方法,而GraphQL则将这一概念巧妙地打包为“订阅”。

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 web sockets was a simple matter, in the words of Hasura’s documentation:


You can turn any query into a subscription by simply replacing query with subscription as the operation type.


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


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:

那只是一个例子。 我们反复经历了这种简单的“两行代码,XYZ主要功能已准备就绪”的范例:

  • Facebook’s create-react-app gave us a full, production-ready webapp scaffold with a few command line calls


  • Deploying that app to a worldwide CDN on Netlify was a matter of clicking around a pretty UI


  • The combination of Apollo and the GraphQL specs meant that a clear standard existed for every kind of data operation from the client side


  • styled-components kept the (admittedly lacking amount of) CSS in our app easy-to-use and modular


  • Google Maps API meant we had an interactive world map integrated into our app after an hour of reading its docs

    Google Maps API意味着一个小时的阅读文档后,我们将交互式世界地图集成到了我们的应用程序中

  • Netlify’s Functions — an abstraction over AWS Lambda — gave us a perfect place to centralize our “game master” operations, critical for a smooth demo

    Netlify的功能 (基于AWS Lambda的抽象)为我们提供了一个集中“游戏主”操作的理想场所,这对于顺利进行演示至关重要

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.

更不用说我们使用的所有FOSS npm小库,这样我们就不会花太多时间弄清楚纬度和经度的实际含义,以及其他胶粘剂。

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.

我们不要忘记,Chrome和Firefox等现代浏览器已经投入了很多工作,或者Netlify-Slack webhooks的负责人在每次构建失败时都会提醒我们,或者React本身在行业中发生了变化。 甚至Heroku之类的工具 只需单击一下即可部署Hasura实例,这证明了它们令人印象深刻,以至于它们在我们几乎没有意识到自己的主要角色的情况下运行如此顺畅。

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

最好的部分: 以上任何一项都不花一美元 。 无论如何,这并不是黑客马拉松的规模。

最重要的是,我们很幸运 (Above all, we were lucky)

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:


  • 2 minutes before we went up to present the final demo, Tyler discovered a bug in our presentation setup that would have kept running the same picture for every game.


    A minute later, he had diagnosed and repaired it.


  • Our app was (is) full of security holes and bugs.


    Someone could have wiped our database in two second during any of the demos.


  • We happened to pick a team name that starts with “W”. This meant we had the good fortune to do the judging interview last, and the final presentation last.

    我们碰巧选择了一个以“ W”开头的团队名称。 这意味着我们有幸在最后进行评审面试,并在最后发表演讲。

    With the whole process being a time crunch, every minute of extra preparation was valuable.


  • Remember your randomly-selected college roommate? Probably a 50/50 chance it was a terrible experience.

    还记得您随机选择的大学室友吗? 大概有50/50的机会,这是一次糟糕的经历。

    And then there’s us: 4 strangers who miraculously survived the weekend without a single disagreement.


  • Our broad range of skills and abilities meant we never got stuck on any particular development problem for more than a short period of time before someone stepped in and quickly repaired issues they had at some point run into in their own line of work.


    Hackathon projects are well known for blowing up because of some pesky bug that nobody can figure out for hours — we somehow dodged all of that.


  • We’d never tested our app with more than a handful of people before we got up on stage to handle 70+.


    Our belief that Heroku could handle that many websocket connections on its free tier was blind faith.


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

我可以继续。 周末是一个过山车,但是一次又一次,事情刚刚发生。

WITWorld将作为一个开源项目徘徊 (WITWorld will hang around as an open source project)

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.

欢迎所有技能水平的贡献者! 无论您是要做出贡献还是跟随任何进展,我们都希望您能与时俱进。 加入邮件列表

JAMstack被一个社区的地狱迎来了 (JAMstack is being ushered in by one hell of a community)

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

在2000年代初期,您需要购买自己的服务器机架空间来建立网站。 到2010年,AWS和其他云提供商已将这一概念变为现实。

Today, we’re in the next stage of that evolution: you don’t need a back-end or DevOps expert to spin up your next app idea. Netlify and the rest of the API economy are on track to have turned that leaf by 2020.

今天,我们正处在发展的下一阶段:您不需要后端或DevOps专家即可启动您的下一个应用程序创意。 Netlify和API经济的其余部分有望如期在2020年实现转机。

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


  • Benjamin Dunphy of Real World React — hackathon organizer extraordinaire

    现实世界React的本杰明·邓菲(Benjamin Dunphy)—黑客马拉松的组织者非凡

  • Quincy Larson of freeCodeCamp — life of the party and humble freeCodeCamp empire-builder

    freeCodeCamp的 Quincy Larson —党的生活和谦虚的freeCodeCamp帝国建立者

  • Matt Biilman and Phil Hawksworth of Netlify — bonus points for also running JAMstack_conf

    马特Biilman和菲尔·霍克斯沃思的Netlify -对于同时运行积分JAMstack_conf

  • Brian Douglas of GitHub — gracious host and provider of food

    GitHub的 Brian Douglas-美食的主人和提供者

  • All the API sponsors: Hasura, Fauna, Formspree, Clarifai, and Pilon


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!

此类黑客马拉松和相应的JAMstack_conf之类的事件仅仅是开始。 我们期待JAMstack社区的美好未来!

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.

非常感谢Jeff Appareti,Gabe Greenfield和Tyler Vick审查了本文的草稿。 成为一支很棒的团队度过周末。

This post was originally published on tadasant.com


翻译自: https://www.freecodecamp.org/news/the-power-of-jamstack-how-4-strangers-built-an-interactive-live-game-show-app-in-a-short-weekend-f8c1fec4f55b/

j: stone game

  • 0
  • 0
  • 0
  • 一键三连
  • 扫一扫,分享海报

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
钱包余额 0