CSS-Tricks-漫谈前端开发未来
CSS-Tricks-漫谈前端开发未来
几天前我受邀就此话题做演讲。我想说和任何人一样我其实并不够格回答这个问题。如果你真的需要这个问题的答案，或许你可以看看来自众多开发者调查结果的聚合数据。
我其实有一点资格, 除了维护本站需要我每天都思索前端开发，同时可以接触到许多关于前端开发的分享对话, 我本身也是一名活跃的开发者。我在CodePen工作, 这里聚集了一批前端开发者。
而且我每周都在ShopTalk Show上和众多开发者交流前端开发， 我也会游历周围参加以前端开发分享为主的各种会议。
我尝试这样总结。再次声明:
- 本文并不全面
- 本文只是一些简单的猜想
- 纯属个人想法
持续高涨的用户体验期望
以下创造了条件：
各类网站持续要求改进是用户体验提升, 这要求开发者迅速构建高效且快速的复杂web应用。
新版本Javascript已经发布
就jQuery的方便性而言, 在新的开发环境中jQuery已经完成使命。 我的意思并不是ES6+已经完全覆盖, 但正在逐步走向这种趋势。 太过直接的和DOM打交道并把它当成一种状态存储工具使我们陷入麻烦当中, 如我开头所说的, 用户体验期望加上复杂度都在上升。我们需要
管理前端开发的复杂度。
像我们之前讨论的，状态其实是个大概念。网站构建将会首先需要考虑什么状态需要管理，从而建立对应状态的存储。光框架就有这些: Ember, React, Vue, Angular, Svelte等等。
无论哪种框架，他们都采用管理状态、组件以及处理DOM。 现在他们也在性能、功能和API易用性上激烈竞争。
TypeScript也似乎是个长期的赢家， 因为它可以和任何应用协作，同时稳定性也不赖，而且相对开发者有着良好的编辑器体验。
构建系统而不是网页
样式指南、设计系统、模式库， 这些正在成为web应用的标准部分。这些可能将会成为首要交付的部分。系统可以基于任何需求构建。网页的概念已经一去不返。 将一系列的组件拼装构建用户可见系统。组件拼装可以由用户体验设计师、交互设计师甚至是营销人员。
新的JavaScript趋势就是这样。
原生和Web之间界线日趋模糊
正如Sketch和Figma一样, 哪个更好? 其实我们在意他们的功能，而不是原生实现或者webapp应用。我应该用Slack还是TweetDeck原生APP, 或者只开个Tab页。无论哪种都可行,有时webapp比较好。我希望它是原生就因为它可以是我的dock工具条上的图标，而且可以持久化登录态，所以我会用Gmail的Mailplane和Trello的Paws图标。
我经常用一些应该是原生应用的APP， 最好发现在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),构建过程和以前一样将会因此而改变同时最佳实践也会随之发展。
译者注
- 因译者水平有限，如有错误，欢迎指正交流
