【译】关于GraphQL,你需要知道这些

作者:Weblab Technology | 译:kongfanjia 原文地址: https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 在你已经构建并使用了 REST API 很长一段时间后,最近可能听说了一个 API 技术领域的的新星 —— GraphQL。有些人说它很好,但另一些人并不这么认为。现在,我相信你一定会好奇 GraphQL 到底是什么,它与传统方法有什么不同? 本文的主要目的是强调 GraphQL 的主要特性并讨论这一特定 API 规范的主要优点和缺点。 GraphQL 通常被描述为一种前端导向的 API 技术,因为它允许前端开发人员用比以前更简单的方式请求数据。Facebook 推出的这种查询语言的目的是以直观和可调的格式来制定客户端应用程序,来描绘其数据的先决条件及交互。最棒的一点是该语言不依赖于任何特定的数据库管理系统,并且被我们当前使用的数据格式和编码方式所支持。 传统 REST 的一个基本问题是客户端无法个性化请求数据集。除此之外,运行和控制多个接口是另一个难点,因为客户端总是需要从多个接口请求数据。 在搭建一个 GraphQL 服务器时,最重要的是用单一的 URL 入口来完成数据获取和更改。因此,用户可以通过传送一个说明所需内容的查询字符串来从服务器请求数据集。 在我们继续之前,在这里您可以找到我们的个人经验。 https://github.com/weblab-technology/graphql-example GraphQL VS REST REST 和 GraphQL 的相似之处是它们都用于构建 API 并且通过 HTTP 进行管理。 就差异而言,REST 主要是一个以网络为中心的软件的结构概念,没有规范,也不获取明确的工具集。它更专注于 API 的稳定耐用性而非最优的性能。 而 GraphQL 是一种设计用于通过 […]

【译】React 优化:虚拟 DOM 详解

作者:Alexey Ivanov、 Andy Barnov | 译:大辉 原文地址:https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained 本文将带你学习 React 的虚拟 DOM,并应用这些知识来加速你的应用程序。在这个对框架内部进行全面友好的初步介绍中,我们将揭开JSX的神秘面纱,向您展示React如何做出渲染决策,解释如何找到瓶颈,并分享一些提示以避免常见错误。 React 持续领跑前端世界并且没有下降迹象的原因之一,就是其平易近人的学习曲线。在用 JSX 和 “State vs Props” 的概念武装你的大脑之后,你就可以开始开发了。 但要真正掌握 React,你需要有 React 思想。本文试着从这个方面来帮助你。下面通过我们其中的一个的项目 React table 来了解一下: 如果你已经熟悉 React 的工作方式,可以直接跳至“优化:挂载/卸载”这节来继续阅读。 (图中是一个在 eBay 的业务中拥有庞大数据的 React table) 通过这上百行动态的并且可过滤的数据行,来理解框架的细节对于保证用户的流畅体验是至关重要。 当程序出错的时候,你很容易感受到,输入文字变得卡顿,复选框检查都需要一秒钟的时间,模态框也很难显示出来。 为了解决这些问题,我们这篇文章要涵盖 React 组件从定义到在页面上呈现(然后更新)的整个生命周期。系好安全带,我们要发车了。 JSX 的原理 在前端圈中称为“转译”的过程,其实用“汇编”来描述是更正确的术语。 React 开发者推荐你使用一种混合了 HTML 和 JavaScript 的语法,即 JSX 来编写你的组件。但浏览器对 JSX 及其语法并不理解。浏览器只理解 JavaScript,所以 JSX 必须转换为 […]

Hello PWA

作者:永无止晋 2016年 Google 在 I/O 大会上提出一个 Next Web Generation 的概念 —— PWA 横空出世,2017年始开始流行,目前虽未完全成熟,但越来越火爆,可以预见未来会广为流行。你还在等什么? 一、Hello PWA PWA(Progressive Web App)[1], 渐进式 WEB 应用,是提升 Web App 的体验的一种方法,给用户原生应用的体验。PWA 可以通过 Service Worker, Manifest 等新技术让站点具备离线可用、添加到桌面、实时消息提醒等功能,从功能和体验上无限接近原生 App。 1.1. 背景 自1990年万维网之父-蒂莫西·约翰·“蒂姆”·伯纳·李爵士,创建了 HTTP、HTML 和 WorldWideWeb (全世界第一个网页浏览器)以来,Web 技术和影响力在以惊人的速度增长。HTML5,CSS3,Webpack,React,VUE,Babel,SPA 等技术的成熟与发展仿佛让 Web 进入了百家争鸣的春秋时期,Web应用能做的事情越来越多,大家对web的希望也越来越高。 但随着移动时代的到来,web 应用因为不能离线访问,没有快捷入口和页面频繁卡顿等开始失宠。除了原生应用因离线能力,瞬时加载和可靠性强等优点爆炸性崛起外,Hybrid ,React Native 等 APP 开发模式似乎也有点如日中天的“赶脚”。作为一名 Web 前端开发工程师已经瑟瑟发抖,你呢? 莫慌,老大哥 Google 的工程师们早就“抖”完了,并在2015年提出2016年推出 PWA ,号称 […]

Webpack打包实用优化方案

作者:汪楠 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率,成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了,关于 Webpack 的优化方案,网上有很多文章可以供大家参考。查阅前人的资料,总结自己在项目中遇到的问题,最终得出一些比较实用的优化方案,本文将与大家一一分享。既然是打包优化,那么我们需要时刻关注以下几点: 减少编译时间 减少编译输出文件大小 提高页面性能 Webpack3.0 的 Scope Hoisting (作用域提升) Webpack3.0 最大的一个新功能就是 ScopeHoisting (作用域提升)。曾经的 Webpack 是将每一个模块(每一个被 import 或者 require 的代码) bundle 到每一个独立的闭包函数里。这会导致 bundle 的文件里,每一个模块外层都会有一些特殊的闭包包装,导致文件增大,同时它也使得编译后的 js 文件在浏览器中的执行效率降低。 虽然,理论知识已经了解,但我们还是用实际操作来验证一下: 开启 ScopeHoisting 非常简单,因为 webpack 已经内置了这个功能,在插件入口处新增 new webpack.optimize.ModuleConcatenationPlugin()。

执行编译后,结果如下: bundle.js 大小是3.03KB 我们把 new webpack.optimize.ModuleConcatenationPlugin() 打开,编译结果如下: 对比两个的区别大家可以发现,在 bundle.js 中 Webpack2.0 比 Webpack3.0 多了以下的代码: […]

【译】使用 Flutter 实现跨平台移动端开发

作者: Mike Bluestein   | 译:孙印凤 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/] 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架。它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用,同时它也是 Google 即将推出的 Fuchsia 操作系统的开发平台。此外,通过自定义的 Flutter 引擎可以将其嵌入到其他平台。 Flutter 为什么会出现?为什么要使用它呢? 一直以来,跨平台工具采用以下两种方法之一: 在原生应用程序中嵌入 web view ,像构建网站一样构建应用程序。 封装原生平台里的控件并为它们提供一些跨平台的参数。 为了使移动端开发变得更好,Flutter 尝试了一种不同的方法。它提供了开发人员工作的框架应用程序和能够托管应用程序的可移植运行时的引擎。该框架依托 Skia 图形库而构建,提供了实际渲染时用到的 widgets,而不仅仅是原生应用控件的包装器。就像 web 包装器选项提供的那样,该方法可以灵活的以完全自定义的方式构建跨平台应用程序,同时还会提供流畅的性能体验。与此同时,Flutter 自带的丰富的 widget 库以及一些开源的 widgets 使其成为一个功能丰富的平台。简言之,Flutter 目前是移动端开发者接触到的最接近跨平台开发的东西。 Dart Flutter 应用程序使用 Dart 编写,Dart 是最初由 Google 开发的一种编程语言。它是一种支持预编译和实时编译的面向对象语言,所以比较适合开发原生应用程序,配合 Flutter 的热加载可以提供高效的开发工作流程。Flutter 最近也转向使用 Dart 2.0 […]

© 2018 JDC. All Rights Reserved.