linc2046

漫谈前端开发未来-CSS-Tricks

linc2046 · 2017-06-06翻译 · 272阅读 原文链接

几天前我受邀就此话题做演讲。其实我并不够格回答这个问题,其他人也一样。如果你真的需要这个问题的答案,或许你应该看看来自众多开发者调查结果的聚合数据。

尽管如此,我还是有一点点资格的。 除了维护本站需要我每天都思索前端开发,并且接触到许多前端开发相关的讨论, 我本身也是一名活跃的开发者。我在CodePen工作, 这里聚集了一批前端开发者。

而且我每周都在ShopTalk Show上和各种开发者交流前端开发, 我也会四处游历参加以前端开发为主的各种会议。

所以让我尝试谈论一下这个话题。

再次声明:

  • 本文并不全面

  • 本文只是一些简单的猜想

  • 纯属个人想法

持续高涨的用户期望

这为前端的未来做好铺垫:

网站必须不断提升。这要求开发者快速构建复杂的应用,并且应用要运行得又快又好。

新版本Javascript已经发布

尽管jQuery曾是我们的极佳选择,但在新的开发环境中已经没有它的用武之地。我不光是指ES6+已经满足了我们的需求,不过这是事实。我们曾经因为太过直接地操作DOM并把它当成状态存储工具而陷入麻烦当中。如我开头所说的,用户期望以及随之而来的复杂度都在上升。我们需要管理这种复杂度。

正如我们之前讨论的状态是个很大的概念。网站构建将会先考虑管理哪些状态,从而为状态创建对应的存储。

新的框架应运而生。Ember,React,Vue,Angular,Svelte等等。无论哪种框架,他们都在管理状态和组件,以及处理DOM上为我们提供了便利。

现在它们还可以在性能、功能和API易用性上一较高下。

TypeScript也似乎是个长期的赢家, 因为它可以和任何应用协作,同时稳定性也不赖,对开发者也有更好的编辑器体验。

构建系统而不是网页

样式指南、设计系统、模式库, 这些正在成为web项目的标准部分。这些可能将会成为首要交付的部分。系统可以基于任何需求构建。网页的概念已经一去不返。 组件被拼装到一起以构建用户所见的系统。而组件拼装的工作可以由用户体验设计师、交互设计师甚至是营销人员来完成。

新的JavaScript为此提供了非常便利的特性。

原生和Web之间界线日趋模糊

Sketch和Figma哪个更好? 其实评价的标准是它们的功能,而不是看它们是原生实现还是web应用。我应该用Slack或者TweetDeck原生APP, 或者只开个浏览器Tab页。无论哪种都可行,有时Web app比较好。我喜欢原生的理由是它的icon会出现在我的dock工具条上,而且可以持久化登录状态,所以我会用Gmail的Mailplane和Trello的Paws。

我经常用一些感觉应该要原生实现的应用,但是最后发现在Web上一样好甚至比原生体验更好。看那些音视频APP,Skyepe就是全功能APP,Lightstream完全是个流媒体工具, Zencaster可以记录多轨道高质音频。这些都可以在浏览器中实现。

这些只是可以在Web中实现的几个例子。Web技术本身已经取得巨大进步。 服务化进程可以让我使用更重要的功能,像离线能力和消息推送,Web音频API, WEB支付API。WEB将会成为构建APP的主导平台。

URL地址依然重量级特性

web这个真的是走对路子。通过一种统一的方式切换至特定资源是很棒的。没有URL, 就没有人类迄今为止最重要创新之一: 搜索引擎。URL让分享和收藏成为可能。URL使得营销成为公平竞争的领域,任何人可以不受限制的访问任何URL。

性能十分重要

人们逐渐难以忍受低性能网站访问体验。每个人都想任何操作都是即时。那些很慢的网站将让人难堪。

CSS越来越模块化

当我们写样式的时候,总是要考虑很多选择。这块是不是要写成全局样式? 我还是要故意把这个样式写成整站全局?

又或者这只是个组件特定样式?CSS将会分成这两部分。组件特定样式将会内部封装同时和组件一起打包按需加载。

CSS预处理将会慢慢落幕

许多预处理器的重要特性已经加入到原生CSS, 比如: 变量, 或者更高级的构建过程(improt)已经能处理的更好。其实我们最终用来打包和封装CSS的工具,某种意义上,还是CSS预处理器。所以在需要预处理的场景还是得预处理器来做。在众多的预处理器的标准集合中,我

想我们主要会想念的是混入(Mixin)。如果原生CSS实现混入(或许是@apply)和扩展extend(或许是@extend), 将会加速淘汰目前预处理器的核心功能。

熟练掌握HTML和CSS依然很重要

搭建HTML的方式以及如何形成DOM将会持续变化。但是你仍然需要如何编写良好的HTML结构。你将需要知道如何编写开发者可用的,用户可访问的,易于编写样式的HTML结构。

浏览器加载和解析CSS的方式将会持续变化,但你仍然需要掌握如何使用CSS。你仍然需要知道如何实现布局,管理间距,调整字体,而且还得有审美品位。

构建过程颇具挑战

因为性能相当重要, 而且有很多巧妙的解决性能方式, 我们将会看到更多生产环节打包代码库的创新。像webpack这样的工具(tree shaking 和代码分割) 已经在打包方面做出了很多。但是使用自动化工具魔法般最终部署代码到浏览器和首屏加载优化, 按权重依次打包静态

资源、判断资源发送位置和方式、解决冗余资源发送方面仍然有很大的发展空间。

随着web平台不断地演进,比如: Client Hints,构建过程和以前一样将会因此而改变同时最佳实践也会随之发展。

译者linc2046尚未开通打赏功能

相关文章