前端

【译】《React 学习之道》The Road to learn React (简体中文版) 最简单,且最实用的 React 实战教程

通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程。 前言 《React 学习之道》这本书使用路线图中的精华部分用于传授 React,并将其融入一个独具吸引力的真实世界 App 的具体代码实现。 如何掌握 React 存在特别多的路线图。本书提取这些路线图中的精华部分,并将其融入于一个具体的应用程序当中。您将会构建一个属于自己的 React 应用程序。在本次学习之旅当中,您将学习 ES6,了解所有 React 的基础知识、先进理念,以及组件的内部状态管理。 作者与译者 首先,感谢 The Road to learn React 原书作者,Robin Wieruch。本书的翻译始于 React China 社区的一个帖子:The Road to learn
吕立青

技术雷达之「微前端」- 将微服务理念扩展到前端开发(下:实战篇)

前言与大纲 本文分为理论和实战上下两篇。本篇为微前端的实战篇,共计约 5k 字,预计阅读时间 10 mins。 在技术雷达之「微前端」- 将微服务理念扩展到前端开发(上:理论篇)中,我们介绍了微前端在单体应用和微服务的架构演进中所产生的缘由,将微服务理念运用到前端开发就是为了解决臃肿前端的当前现状。与此同时,合理拆分微前端也给我们的应用开发带来显而易见的好处,在本篇当中我们将逐一介绍微前端的实践方案与可能遇到的问题和对应的优化建议。 * 微前端的可选实践方案(4 种 +) * 创建更小的 Apps(而不是 Components) * 如何组合微前端的 App 模块? * Option 1: 使用后端模板引擎插入 HTML * Option 1.1: 渐进式从后端进行加载 * Option 2: 使用 IFrame 隔离运行时 * Option 3: 客户端 JavaScript 异步加载 * Option
吕立青

技术雷达之「微前端」- 将微服务理念扩展到前端开发(上:理论篇)

前言 本文分为理论和实战上下两篇。本篇为技术雷达之「微前端」- 将微服务理念扩展到前端开发(上:理论篇),共计约 2k 字,预计阅读时间 5 mins。 在 ThoughtWorks 正式发布的最新一期技术雷达(下载地址:technology-radar-vol-17-cn.pdf)当中,「微前端(Micro Fontends)」已经进入到试验阶段,而试验环所列出的技术是我们认为值得去追求的。理解如何建立这种能力对您所在的组织十分重要,现在就可以尝试在一个低风险的项目上试点和实践这项技术,帮助您真正地了解这门技术。 摘自技术雷达:我们已经从引入微服务架构中获得了明显的好处,微服务架构可以让团队裁剪出独立部署的交付物以及可维护的服务。不幸的是,我们还看到许多团队在后端服务之上创建了前端单体——一个单一,庞大和杂乱无绪的浏览器应用。我们首选的(经过验证的)方法是将基于浏览器的代码拆分成微前端。在这种方法中,Web 应用程序被分解为多个特性,每个特性都由不同的前后端团队拥有。这确保每个特性都独立于其他特性开发,测试和部署。这样可以使用多种技术来重新组合特性——有时候是页面,有时候是组件
吕立青

微信小程序(1):技术是如何服务于商业的?

前言 微信小程序已经在昨天(2017/01/09)正式发布,张小龙以发布日期的方式致敬了乔布斯的 iPhone(2007/01/09),其野心不可谓不大。 下面我将会尝试从商业和技术这两个角度来谈谈微信小程序。也许作为程序猿的我们会在技术架构上看不起小程序,不就是模仿了 Vue 的语法和 ReactNative(or Hybrid)的原理吗?也可能会因为其封闭性而批判小程序,破坏了万维网 Web 本来的开放性和去中心化;更加会由于其诸多限制而抱怨小程序,有限的官方 API 和打包程序大小让开发者感到捉襟见肘。 但要是我们明白了微信小程序的背后是如何承载着腾讯的商业愿景,便会明白一个道理,即「技术永远是服务于商业的」,特别是离用户更近的客户端应用程序相关技术。很多时候某些功能不是在技术上无法实现(可不要小瞧了 BAT 所招聘的开发者们),而是在商业和产品的背景下,有目的性、有策略化地刻意而为之。 商业 微信小程序是什么? 极客公园前 CEO 阿禅在《小程序想要什么?》这篇文章中提到,一句话总结张小龙对小程序的定义:小程序希望用即用即走的方式激活线下的弱连接场景。
吕立青

【译】整洁代码:JavaScript 当中的面向对象设计原则(S.O.L.I.D)

原文地址:https://github.com/ryanmcdermott/clean-code-javascript#classes GitHub 总是有很多 Code Example 案例的仓库来教你如何正确写出好代码,诸多 Markdown 写手以 BAD/GOOD 两种代码作为示范,辅以一些叙述和注释作为说明,清晰易懂。我就准备来翻译最近看到的 JavaScript 整洁代码中 Classes 设计原则这一段,进一步加深对面向对象设计原则的理解,而不只是 Java 世界。 JavaScript Classes Single Responsibility Principle (SRP) | 单一职责原则 As stated in Clean Code, “There should never be more than one reason for
吕立青

「技术雷达」之使用 Enzyme 测试 React(Native)组件

组件化与 UI 测试 在组件化出现之前,我们不谈 UI 的单元测试,哪怕是对于 UI 页面的测试来说都是一件非常困难的事情。其实组件化并不全是为了复用,很多情况下也恰恰是为了分治,从而我们可以分组件对 UI 页面进行开发,然后分别对其进行单元测试。 特别是当浏览器中的 Web 应用越来越庞大的时候,借鉴于在后端将大型单体应用拆分成微服务架构的最佳实践一样,前端应用也可以被拆分成不同的页面和特性。每个特性由一个单独的团队从端到端对其负责,它允许团队规模化地交付那些能够独立部署和维护的服务,在最新一期的技术雷达当中这种方式称之为微前端,微前端的目标就是允许 Web 应用的特性之间彼此独立,每个特性可以独立地开发、测试和部署。 React.js 作为前端框架的后起之秀,却在 2015 年携着虚拟 DOM,组件化,单向数据流等利器,给前端 UI 构建掀起了一波声势浩大的函数式新潮流。虽然说组件化不是 React 最先提出来的,但却是 React 使得组件化在前端世界里发扬光大的,而现在几乎所有的所谓现代化 UI 框架比如
吕立青