在ChartBoost时网3.0

为了简洁起见,我们’重新配音下一代Web应用程序开发“Web 3.0.”这需要一系列新技术和新思路,最近只有现代浏览器所取得的大型进展。

这是什么意思?这意味着创建网络 应用程序 ,不是网站。我们相信服务器端是一个网络 服务 ,而客户端是 应用 。服务器提供API,客户端是使用此API的自包含应用程序。移动应用程序将是平等的公民,并使用完全相同的API。

我们认为这些想法是未来,而随着我们的发展团队和我们的能力,我们将首先潜入他们脑子。这些项目中的第一个 - 以及我们的仪表板将成为旧版的测试平台 - 是新的 绘图船上Help site.

帮助网站上的iPhone

帮助网站。

所以没有进一步的ado,这些是我们的一些很酷的新事物’重新尝试新的帮助网站:

推状态

也许你将注意到的第一件事是导航网站不涉及任何页面刷新。相反,这是通过一种名为新技术完成的“Push State.”它允许Web应用程序操纵浏览器历史,基本上假装导航并插入自己的JavaScript回调而不是重新加载。

在页面之间移动时,HTML永远不会被替换,这意味着应用程序的元素可以保持在屏幕上,甚至可以动画,而新内容正在加载。在帮助网站上,一个很好的例子是内容的标题部分中的动画,以及左侧的弹跳图标。

这也使整个网站感觉更响应并且更快,因为用户可以忙于动画,而对服务器的请求发生在后台。那个,请求要小得多,因为这一切’所需的是文章内容,没有布局或支持文件。路由纯粹在JavaScript中完成,并从服务器本地加载任何URL,只需返回相同的HTML文件和路由代码,这知道如何直接加载所请求的文章。

JSON-API驱动

这与上面的手牵手:现在我们不’t需要完全呈现的HTML页面要从服务器返回,服务器现在只能提供优雅的REST API。此API使用HTTP:版本控制和身份验证的全功率通过标题完成,输入将在请求主体中作为JSON发送,并使用HTTP动词。

响应

在一个永远连接的世界中,并且通过从智能手机到平板电脑的移动设备的扩散,我们认为是’对于Web来说,对网络的每一个设备都会成为一个更重要的。移动优化的网站只是唐’削减它;智能手机值得具有与宽屏台式计算机相同的全部体验。

帮助网站上的iPhone

帮助网站,在iPhone上。

The help site, as well as this very blog, are responsive designs. They adjust and are fully functional on all devices from iPhone to Cinema Displays. To achieve that, we make use of CSS @media queries as well as rem and percent-based sizing. We used the 基础 其内置响应网格的框架。

向量(图标字体& CSS)

最近的另一个变化是增殖“retina”(高分辨率)屏幕。他们’ve been around for a while on iPhones, and are now expanding to Android devices, tablets, and computers. This is most commonly done by doubling the pixel-to-point ratio, and on iOS it is common to include double resolution assets by suffixing @2x to the image name.

但是,我们认为,对于UI工作,本机渲染和向量比图像更好。因此,对于帮助网站,我们使用图标字体和CSS3属性的组合来构建UI的整体。 帮助地点实际上没有图像’s UI!

SCSS.

另一种新技术我们’使用的是CSS预处理,通过 SCSS. 。这有助于使我们的CSS代码很多清除器和可重复使用:使用Mixins(类似于函数),用于共同前缀属性,以及颜色的可变依赖项:

$button-green-one-textcolor : #FFFFFF;
$button-green-one-border : saturate(darken($primary-    color,11%), 1%);
$button-green-one-light-inset : #FFFFFF; /* Will be used inside an RGBA with opacity */
$button-green-bg-gradient-start : darken($primary-color, 1%);
$button-green-bg-gradient-end : saturate(lighten($primary-color, 7%), 7.5%);

您可能已经注意到此博客和新的帮助网站看起来相似。它们实际上仅共享相同的SCSS源,只有差异很少,就像原色从蓝色变为绿色一样。除了一些其他整洁的SCSS之类的功能,如嵌套,允许更清晰,更可重复使用的CSS代码。

啰嗦

我们相信整个团队应该能够编写和编辑帮助文章。 啰嗦 是一种奇妙的简单标记语言,它围绕了它应该看起来像纯文本。标记源文件应与其产生的输出一样可读;事实上,在标记中比HTML写入更自然。因此,我们的帮助文章是用Github味的破平作用的。

由于我们的文档包含了相当数量的代码示例,因此我们很重要,以支持Github风格的代码块,以及本机语法突出显示。作为一个简单的例子,这是我们的 iOS集成文章 ,及其 源代码 .

GitHub.

帮助内容,非常喜欢源代码,是多个人协作的东​​西,它可以从版本控制和分支中受益。而不是重新发明轮子,我们决定选择我们每天都作为团队使用的工具:Git和 GitHub. 。我们所有帮助文章(及其凌乱历史)的源代码都是公开托管我们的github。 看看这个! 谁知道,也许有人甚至会在某些时候向我们发送拉出请求。

设计

帮助网站上的iPhone

原始纸草图

进入它,我们知道设计将是这一关键的一部分。我们在真正被吸引之前所拥有的,并不符合我们的标准。

帮助网站上的iPhone

替代方向

我们在一个星期内经历了几次迭代,在定居当前的设计之前。


我们相信网络终于达到了一个尖端。关于Web技术的十年增量改进的高潮是在我们身上,让我们以完全新的和更好的方式做事。如果这对你来说是令人兴奋的,为什么不’你扔了一条线吗? We’re hiring!

发表评论