文档结构  
翻译进度:50%     翻译赏金:0 元 (?)    ¥ 我要打赏

过去的两周,我都在为一个叫做“全球热点”(The Global Upvote)的个人项目工作。这个项目会从全球网络上采集备受关注的热点故事,并且每一分钟更新一次。

本文重点介绍我如何帮助“全球热点”项目中有抱负的开发者们实现这个项目需求。我曾经写过另一篇文章,讨论过这个项目网站的设计方法,叫做 《如何设计一个渐进体验(PWA)的新闻网站》。虽然这两篇文章讨论的内容看似是分离开的,但在实际的工程中设计和开发过程却是无法分离的。

所以,在阅读本文时请注意,我写过的一篇此文的姐妹篇如何设计一个渐进体验(PWA)的新闻网站

第 1 段(可获 1.2 积分)

查找数据

移动产品设计上有个理念,叫做内容优先。这种设计理念要求:你的一切设计都应该服务于内容。而对于我来说,我首先必须要确定的是:我能采集到正确的数据。所以在我开始任何的前端开发工作之前,我需要先完成Node服务端采集Reddit(译者:国外的一个社交新闻网站)内容的工作。

我确定我需要从Reddit网站采集两部分的内容:

  1. 世界新闻(WorldNews,Reddit中的一个内容分类或版本)板块下的头版头条
  2. 一个Reddit机器人整理的每条新闻的概要。(译者:这个涉及到Reddit的功能,在Reddit上可以创建一种智能机器人就称为bot,来智能处理一些事情。我理解笔者的意思就是需要找到或者自己创建这样一个机器人来总结新闻的概要,后面内容采集中的源代码也印证了这点。)

可以看到,上图中满屏的“[Object Object]”就是我采集到的可爱的Reddit数据。

幸运的是,我们有个很棒的Node.js的插件,叫做Snoowrap。使用这个插件我们可以很容易的在任何时候去Reddit采集我们需要的内容,具体代码可以看这里

第 2 段(可获 1.5 积分)

我在这个项目中学到的一件重要的事情是请求管理。 在过去,每次单个用户访问我的应用程序时,我都会使用我的节点服务器作为API请求者。但是,现在我显然顿悟了。

我可以在我的服务器上保留少量的数据(故事),并在一分钟内用一个简单的 setInterval函数更新一次。这就避免了滥用Reddit API限制的风险,缩短了故事(数据)加载时间,因为我不需要每次都去ping Reddit API了。

保持它的渐进性

想知道制作一个渐进性体验的网页应用程序的廉价而肮脏的秘密吗? 只要使用 Create-React-App 框架,这个项目的贡献者做了一项非常棒的工作,即为接近即时的负载添加服务者,并为你的元数据提供一个清单文件, 尽其全力优化网络包的绑定 。在过去,我不得不为PWAs(渐进体验式Web应用程序)做大量的工作,甚至还写了一份 教程 来完善它们。

第 3 段(可获 2.09 积分)

This was the first time I worked on an offline-friendly mode for Chrome and Firefox to do stuff like read articles before my computer connected to wifi.

The first half was to do things whenever the internet connection changed using event listeners. That way, a new connection to the internet could trigger fetching stories, and a lost connection could notify the user they are offline.

The second half of offline-mode was saving new stories to the user’s device every time they were fetched. This was my first time using LocalStorage, and I was pleasantly surprised by how easy it was.

第 4 段(可获 1.26 积分)

A last bit of the PWA to get done was improving the perceptual speed index. You can see this user-centric metric by opening Chrome DevTools and running an audit. To improve this score, I made skeletons that would appear when my app’s state was fetching.

Plugging a Plugin

I had determined that I wanted the user to be able to save the experience as their new tab for Chrome and Firefox. The browsers natively support setting a home page. But that does not give you control of the URL bar immediately. This was an important detail because a user does not want to have to click the URL bar every time they open a new tab.

第 5 段(可获 1.46 积分)

I feared that I was about to dive into the deep-end of browser extension development. This was something I was not familiar with besides a grid checker to help my visual skills. Once again, this solution ended up being handed to me on a silver platter. Google includes a similar extension in their sample downloads. I was working in no time with the Global Upvote Tab Extension. No changes were even needed for the submission to Firefox’s store!

The Final Outcome

From a development standpoint, I loved all the different solutions I could put together for The Global Upvote. These solutions tell me that the web community is getting better at working together to make development experience less frustrating. Acing the Chrome DevTools Audit, formerly the Google Lighthouse Extension has also gotten the easiest it has ever been.

第 6 段(可获 1.74 积分)

All source code has been open-sourced in case you want to dig around or make it work for you.

Several quick things to note:

  • Where are the CSS files?! 
    There are none. I use Styled Components to attach styles directly to their component!
     
    Check out this talk I gave at IBM about why CSS-in-JS is insanely good: https://vimeo.com/230614037
  • Where is the source code for your tab extension? 
    Check it out in the separate repo for Global Upvote Tab.
  • How do I get started running this locally?
    Check out the documentation for Create-React-App if you haven’t already.
    Much wow. You also need a file called keys.json in the root directory with your information for Snoowrap. It should look like this:
第 7 段(可获 1.53 积分)
{
  "userAgent": "random-term",
  "clientId": "FromYourRedditAPISettings",
  "clientSecret": "FromYourRedditAPISettings",
  "username": "YourRedditUsername",
  "password": "YourRedditPassword"
}

我希望你喜欢这篇文章!

此外, 我还写了一篇关于如何设计渐进式体验的新闻网站的姊妹篇在这里

想获得进一步的信息: 随时联系我通过评论, email, 或是 @seejamescode。我在ATX的IBM设计工作而且总是喜欢与网页设计社区交流。留下你可能有的问题,我会尽力回答你!

第 8 段(可获 0.88 积分)

文章评论