构建更好web客户端,taylor hughes讲述skit框架背后的故事 -欧洲杯足彩官网

【编者按】taylor hughes是launchkit的创建者之一,同时还创建过cluster。本文讲诉了其与 skit的故事,而题目也并不是真的在表达其写了一个javascript框架,而是一旦着手开始,就发现自己“爱上”了它。以下为译文:

背景

我大约与一年前开始着手这件事,那会我必须考虑所有的事情(这也让我开始对web开发抓狂),并列举需要解决的问题。

起初我在想,也许有一天这件事将会很酷炫,而那时我会坐收其成。而现在我只需将其变得更现实就好了。

现在我每天都会去使用它,用它来建立每一个新的项目,并继续完善它。通常坏主意变成现实时会变得很糟糕,但是它成为现实时却没有,这是不是意味着它一开始就不是个坏主意呢?

请听我详细的讲述这件事,或许你也会心动。
一切由此开始

在2014年中旬,我工作于web应用的第一个版本。logged-in web应用是由、、jquery和django构建。它是个。

这个应用做了大量web应用应该做的事情:
  • 服务最佳化、版本化javascript和css软件集(来自cloudfront的产品)
  • 针对facebook、twitter和google,我在页面中呈现各种类型的真实元数据。
  • 在服务器上预渲染一些“一屏显示”的内容,其余部分则放在了客户端。所以用户在页面加载时不会看到一个完全空白的页面。
  • 将服务器上加载下来的数据传递到客户端以作为json,这样后续的客户端渲染会立即生效。
  • ……

事实证明拥有许多小技巧和非凡配置集的是可以工作的。

随着时间的推移,我注意到了一些不好的事情发生了:

引用
最终web页面变得复杂和笨重,而这是我一开始所极力避免的。


前端变得如此复杂,一切都太容易让人动怒。人们开始向我投诉,所以发生了什么?配置当道,部分服务和客户端渲染成巨大的上下文切换,将所有事物都包含在内。我想我还能做一些让构建web前端变得简单和有趣的事情吗?

“不讨厌”的前端web开发是什么样的?

这是我所能想到的样子:
  • 零配置
  • 自动包含相关样式
  • 自动资源编辑
  • 服务端引导
它始终是同构的

解决这种东西需要一系列服务端工作,所以这不仅仅是客户端javascript框架的范畴了。

举个例子来说,它需要知道产品是如何绑定和优化客户端文件并在开发模式中如何各自的包含个体的、不可缓存的javascript文件集。同时还要以类似的方式处理css和软件集,并自动的包括那些对应于我们加载的javascript模块。

此外,如果我们想要摆脱配置来引导页面,则需要放弃控制服务端完全呈现。这样的框架最终会是一个整体类,而不是一个“可插拔的库”——没有配置,它需要大量的结构和协定。

最终呈现的是一个 client-side framework,然后就是一个处理http请求的server-side runtime,之后让所有东西都可以运行于一个浏览器里的。

hello world

skit,一个充当纯api客户端构建网站的客户/服务端javascript框架,

一个skit应用的代码库是一个单一的代码库,共享相同需求的javascript模块、模版等(从服务端到客户端)。代码通过node.js中的skit运行时被执行,随后在浏览器中显示出来。

skit的工作方式是通过抽象化页面生命周期来跨过页面加载障碍。你为一个页面编写单一的控制来操纵加载服务器上的数据,在html中呈现数据并与一个浏览器中的dom挂钩,而所有的这些都在同一个文件里。

数据加载和渲染步骤最初发生于服务器端,然后控制器以same-ish状态自动具体化于客户端。这听上去有点不可思议,不过实际上它是不错的。

skit中每一个url路径都对应于一个单一的skit控制器子类和一个控制器。参考下图:



最后

写这篇文章并不是真的在表达我写了一个javascript框架,而是一旦着手开始,我就发现自己“爱上”了它。或许你可以去尝试一下。

skit是什么?

skit是一个javascript框架,通过下面这个生命周期控制器来创建web页面:



执行如下:



自动,无需配置。

skit是由什么组成的?
  • 一个网络服务,用于在服务器上运行你的控制器,并在浏览器中通过same-ish状态自动设置它们;
  • 一个模块系统,用于构建由模版、样式表和javascript共同组成的组件;
  • 一组轻量级库,便于发出http请求、管理cookies和处理服务器和客户端上的导航。

skit是为了什么?

skit有利于在现有http基础的api上构建web应用,该应用类似于你可能已经为移动应用构建的那种。

skit不是一个完整的框架,甚至不是一个典型意义上的“node.js框架”。它更像一个能运行于服务器上的客户端框架。
skit的特点
  • 共享客户/服务端代码
  • 零配置
  • 最佳模块
  • seo natural way™

skit是如何工作的?



查看原文大图

faq
我可以与一起使用它吗?

也许。如果你现有客户端框架是取决于dom操纵来呈现的话,它将无法帮助你太多。这里有一个将react成功集成到项目的例子,。
  • 大小: 201.3 kb
  • 大小: 108.7 kb
  • 大小: 24.7 kb
  • 大小: 71.3 kb
0
0
评论 共 1 条 请登录后发表评论
1 楼 2015-04-10 22:41
这和freemaker有点接近。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  •  如标准中所定义的那样,hughes 通过执行采用了自适应编码调制技术的 dvb-s2 标准为其客户提供了具有更高可用性的系统和特定天线体积大小的更大吞吐量。hn system 可根据来自 hn 远程终端的信号质量反馈来调节纠错...

  • ofdm系统的自适应功率和比特分配算法,实现系统资源的自适应分配(4)--原创

  • introduction to middleware web service object components and cloud computing by dr. letha hughes etzkon 2017 taylor & frances group

  • hughes现象是指在高光谱分析中过程中,随着参与运算波段数目的增加,分类精度“先增后降”的现象。与多光谱相比,高光谱图像的一个显著特点就是它的波段数目远远大于多光谱图像,因而可以提供更为丰富的细节信息,...

  • web3:开源文化下的技术创新

  • 好的决策,可以加速公司增长、增强团队互信;坏的决策,则会危及自身利益、影响团队士气。 而这两者之间的困境是,高风险决策几乎都不是那么容易决定的。在团队中,哪怕是统一确认最好的选择应该是什么,都是非常难...

  • computational inelasticity (interdisciplinary applied mathematics) (j.c. simo, t.j.r. hughes)

  • cygnus solutions公司,是计算机科学家john gilmor为了让自由软件能得到更好的发展而建立的创业项目。 john gilmor照片,来自wiki 30年前的1992年的某个周六,来上班的人寥寥无几。不过,一个属于神秘群体的小范围...

  • 欧洲杯足彩官网的版权所有(c)2015 bryan hughes 特此免费授予获得该软件和相关文档文件(“软件”)副本的任何人无限制地处理软件的权利,包括但不限于使用,复制,修改,合并的权利,发布,分发,再许可和/或出售本软件的副本...

  • 在每个新背景上均包含nhl魔鬼杰克·休斯(nhl devick jack hughes)的高清图像 安装此扩展程序可在每个新标签页背景上获取jack hughes的高清图像! 问题? -> info@brandthunder.com通过我们的扩展程序,您可以获得...

  • this comprehensive study covers over 300 different service providers and almost 30 different product platforms from all the major vendors. as has been the case for nineteen years, the report is the ...

  • “我喜欢编写身份验证和授权代码。... 在本教程中,您将使用vue.js作为客户端并将spring boot作为资源服务器来构建完整的crud web应用程序。 您还将使用oauth 2.0和okta保护应用程序的安全。 crud是c reate,r ea...

  • 海事卫星宽带上网终端bgan hughes 9201规格书.pdf 卫星wifi

  • hughes现象hughes现象是指在高光谱分析中过程中,随着参与运算波段数目的增加,分类精度“先增后降”的现象。 与多光谱相比,高光谱图像的一个显著特点就是它的波段数目远远大于多光谱图像,因而可以提供更为丰富的...

  • 您可以在 james hughes 的精彩了解有关 msa 的更多信息。 安装和先决条件 rodent 可以作为 gem 使用,安装它只需安装 gem $ > gem install rodent 如果您使用 bundler,请将 gem 添加到 gemfile gem 'rodent' ...

  • tf之gnmt:neural machine translation 基于神经网络机器翻译(seq2seq,rnn→attention注意力) 的简介、在tensorflow中构建自己的神经机器翻译系统介绍 目录 相关文章 neural machine translation 基于神经网络...

  • vb语言vb光盘管理系统设计(源代码 系统)本资源系百度网盘分享地址

global site tag (gtag.js) - google analytics
网站地图