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

    16小时的头脑风暴,设计和开发时间
  • 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)

    建立在至少18个重要的免费软件的基础上(保守估计)
  • About 80 concurrent players in the live final demo

    现场最终演示中约有80位并发玩家
  • $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:

WITWorld团队在世界上的最终排名:

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

每个新的API都带来了新的用例可能性的世界-每一个都比上一个更加动态。

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.

是的,这是我们为WITWorld带来的俗气口号。

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.

正如JeffTylerGabe和我在早餐时见面时(感谢GitHub,为美味的无尽供应),我们就可以开展的工作发表了想法。

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.

只是一个问题:我们谁都没有写过GraphQL订阅。

Hasura to the rescue.

Hasura进行营救。

Hasura provides “a GraphQL server and event triggers over a Postgres database in minutes” and was one of the hackathon’s sponsors.

Hasura是“数分钟内通过Postgres数据库提供GraphQL服务器和事件触发器”的公司,也是黑客马拉松的赞助商之一。

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:

用Hasura的文档的话来说,将我们的应用程序从典型的读写推挽模型转换为通过Web套接字实时转换是一件简单的事情:

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

您可以通过简单的更换将任何查询到预订querysubscription的操作类型。

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

几行Apollo配置可弹出Hasura方便的Web套接字端点。

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

    Facebook的create-react-app为我们提供了一个完整的,可投入生产的webapp支架,并提供了几个命令行调用

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

    只需单击漂亮的UI,即可在Netlify将该应用程序部署到全球CDN

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

    ApolloGraphQL规范的结合意味着对于来自客户端的每种数据操作都存在明确的标准

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

    styled-components使我们的应用程序中CSS(绝对数量不足)易于使用和模块化

  • 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:

在周末的剩余时间里,如果没有任何一种情况发生,我们今天可能不会在WITWorld上谈论太多:

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

    在我们进行最终演示之前2分钟,泰勒(Tyler)在演示文稿设置中发现了一个错误,该错误会使每个游戏都运行相同的图片。

    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.

    然后是我们:4个陌生人,他们奇迹般地度过了周末,没有任何分歧。

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

    我们广泛的技能和能力意味着,在有人介入并Swift修复他们有时在自己的工作线中遇到的问题之前,我们从未在任何特定的开发问题上停留超过很短的时间。

    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.

    Hackathon项目因炸毁而闻名,因为它存在一些令人讨厌的错误,几个小时都没人能弄清楚-我们以某种方式躲开了所有这些。

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

    在我们上台处理70多个应用程序之前,我们从未与多人进行过我们的应用程序测试。

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

    我们认为Heroku可以在其免费层上处理许多websocket连接,这是盲目的信念。

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.

由于我们没有WITWorld未来的具体计划,因此不久的将来我们将清理代码库,设置MIT许可证和一些结构化的Issue,并将其推向成为合理公开展示JAMstack技术的地步。

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

    所有API赞助者:Hasura,Fauna,Formspree,Clarifai和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

该帖子最初发布在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

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值