前端每周清单第 21 期:JS 项目开发样式指南;基

  百度应用运维团队一直追求高质量的产品可用性和用户体验,追求最经济的硬件和带宽成本,追求高效的产品迭代速度,追求无人值守的场景化运维,追求帮助业务核心能力的构建。百度应用运维平台经历了基础运维平台、开放运维平台到现在的智能化运维平台这几个阶段。本次将分享百度对于运维下一幕的思考——AIOps,以及AIOps在百度具体业务场景下的实践落地。

  随着MySQL数据库使用越来越重度,流行度越来越高,同时伴随着使用场景的丰富、云化的普及和智能化的发展,对原本为单机设计的MySQL带来了很多架构上的挑战,包括:性能、成本、安全、容灾,高可用、合规、规模运营等方面,在诸多过去设计层面不被重视的问题。本演讲会从架构演化角度来看现有MySQL技术和产品的变化趋势和解决实践。

  2017年已经成为过去,在AI领域又太多里程碑值得纪念,总结2017是为了更好的迈向2018,所以AI前线年之初为各位读者奉上这样一本迷你书,涵盖了来自全球AI和大数据领域技术专家的年终总结与趋势解读,同时还有世界知名技术大厂的年终技术总结与趋势预测。

  由Ron Meyer和Ronald Meijers共同撰写的Leadership Agility一书描述了一系列领导力风格,他们可用它们来拓展领导技能和增强领导力敏捷性。读者可从中了解各种领导力风格的优点和缺点,学会根据实际的场景选择合适的领导力风格。

  参与物联网项目的人已经意识到,在客户需求与供应商提供设备间存在着很大的差距。Mikael Hakansson介绍了确保物联网成功的五个关键领域,其中包括企业所有权、团队技能、设备板载、处理变更能力以及全面测试。

  前端每周清单第 21 期:JS 项目开发样式指南;基于 Vue 的分角色权限验证;深入 React.js 内部原理

  前端每周清单第 21 期:JS 项目开发样式指南;基于 Vue 的分角色权限验证;深入 React.js 内部原理

  QCon北京2018全面起航:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!

  亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知。

  Lets Encrypt 宣布将在 2018 年一月提供通配符证书服务:自从 2015 年上线;s Encrypt 已经服务于数百万的在线站点,并且大幅度提升了整个 Web 的加密流量占比。近日 Lets Encrypt 宣布将会在来年一月份提供通配符证书服务;某个通配符证书能够应用于某个根站点下的任意数目的子站点,从而帮助网站管理者更加方便地使用单证书来为多个子站点添加 HTTPS 部署支持。(

  百度 Web 生态构建:发布基于 Vue 的 PWA 解决方案 LAVAS;将全面支持 Web AR:在 Baidu Create 2017 Web 生态分论坛上,百度搜索正式对外发布基于 Vue 的 PWA 解决方案 LAVAS,同时宣布将全面支持 Web AR,此外,百度还对 MIP 的架构与原理、HTTPS 等技术进行了深度解析。(更详细的内容以及PPT下载可以访问《百度转型AI,Web大有可为》)

  Webpack import 即将支持异步导入 CSS:一个月前 Tobias Koppers 撰文讨论了 Webpack 对于 CSS 处理的考虑,计划将 CSS 代码与 JS 同等考虑;即开发者可以利用代码分割插件构建的动态代码块来异步加载 CSS 代码。而本文则是详细讨论了该方案以及对于未来代码分割、首屏加载可能造成的影响,并且提出了目前状态下基于 React Universal Component 与 Webpack Flush Chunks 可以实现的异步 CSS 加载方案。(

  MobX 3.2.0 版本发布:MobX 内置了一些全局状态来辅助追踪与调度 Observable 或者 Reaction,在近日发布的 3.2.0 版本中,MobX 能够自动监测应用内是否存在多个 MobX 实例,并且给出响应的告警;更多 MobX 相关资料参考。(

  React Redux 概念与工作流清单:本文包含了一张关于 Redux 概念与工作流的清单图解以及较为详细地渐进式 Redux 基础概念介绍。本文首先概述了项目开发中使用 Redux 的意义以及 Redux 相关的技术栈,然后介绍了 Reudx 中 Store 的含义与如何与 Immutable 协同使用;接下来本文介绍了 React Redux 应用中组件的层次划分,如何定义使用 Action、ActionCreator、Reducer 等等;更多 Redux 相关资料参考。()

  基于 Vue.js 2 的分角色权限验证:本文作者因为 Vue.js 平滑的学习曲线与易于理解的官方文档而倾向于使用 Vue.js 进行前端开发工作,本文即是作者介绍如何利用 Vue.js 2 来为项目添加基于角色的权限控制功能。作者在本文中首先介绍了基于角色的权限控制的概念与设计,然后讨论了如何使用 vue-cli 来构建基础项目架构并且按特征划定目录层次,最后介绍了关键部分的代码实现以及如何使用 Vuex 来管理应用状态;更多 Vue 相关资料参考。(

  试用新的 Angular HTTP Client:在 Angular 4.3.0-rc.0 版本在,HTTP Client API 得到了极大的改造与提升,本文即是介绍新版本的 Angular HTTP Client 的用法。在新版本的 HTTP Client 中,其默认假设以 JSON 格式进行返回值解析,并且引入了灵活的 Interceptor 以动态操作请求头或者响应体;同时新版本的 HTTP Client API 为上传与下载这些耗时操作提供了实时进度反馈回调,以方便开发者进行调试或者反馈给用户。(

  基于 Vue.js 与 Laravel 构建实时仪表盘:本文是来自 Spatie 的工程师,介绍基于 Laravel 与 Vue.js 构建,实时的队伍与事件信息展示面板的实践总结。本文首先介绍了历史项目的不足以及目前项目的设计考量,然后讨论了前端网格布局的解决方案。接下来作者分别介绍了服务端基于 Laravel 与客户端基于 Vue.js 的关键代码的实现;更多 Vue 相关资料参考。(

  接口安全自检清单:本文涵盖了项目接口在设计、测试与发布阶段应该注意的安全事项。本清单首先阐述了应该使用标准的权限控制方式 JWT 或者 OAuth 来替代基础的 Basic Auth,然后分别讨论了 JWT 与 OAuth 的设计要点。接下来本清单还列举了对于接入过滤与防 DDoS 攻击、使用合适的 HTTP 方法并且对用户输入进行有效校验、避免关键资源外泄、设置合理的响应头等等内容。(

  JavaScript 项目开发样式指南:开启新的项目就好像在绿地上肆意撒欢,此时的开发者拥有极大的自由;不过如果缺乏良好的基石,未来的项目维护可能会成为你的梦魇。本文即搜集了来自Hive研发团队的 JavaScript 项目开发指南,涵盖了 Git、文档规范、环境变量控制、依赖管理、测试、文件结构与命名、代码样式、日志、API 设计等多个方面;更多 JavaScript 工程实践资料参考。(

  大型应用开发中使用 Redux 的五个建议:Redux 是非常优秀的应用状态管理工具,单向数据流结构允许开发者专注于业务逻辑的开发。本文作者从自身实践出发总结出了大型项目中 Redux 的使用建议,包括建立数据索引并且使用选择器来访问数据、将标准状态独立于可变的界面状态与用户编辑状态、在界面之间合理地共享数据、提取公共地 Reducer 函数以及如何较好地连接 React 组件与 Redux 状态树等等;更多 Redux 相关资料参考。(

  Basement:蚂蚁 Web 研发流程和基础服务实践:在企业级环境下,Web 研发常常会遇到流程冗长繁琐,依赖升级困难等问题;而研发过程中依赖的各种服务,也总有着迥异的申请流程和使用方式,文档匮乏。Basement作为一个主要面向蚂蚁前端的 Web 应用研发流程和基础服务平台,因其简单易用,在大阿里也有不少用户。

  前端 JavaScript 面试问题总结:本文作者发现目前并没有太多令人满意的前端 JavaScript 面试问题列表,因此他基于自己的面试经历与实践总结出了本文。本文主要包含以下部分,首先是基础概念的认知,譬如对于闭包、EventLoop、REST 等概念的介绍;然后是对于编码能力的考量,譬如对于常见的数据结构与算法的实现、代码调试能力与错误定位的评测等等;最后是对于整体系统设计能力的考量,譬如如何设计全栈的 Twitter 实现架构等等。(

  深入 React.js 内部原理:本系列文章详细介绍了 React.js 内部工作原理,作者通过调试整个代码库,分析代码执行调用顺序将整个逻辑以流程图方式清晰地展示出来,并且详细介绍了内部实现中使用到的关键概念与方法。本系列文章会包含 Stack Reconciler 与 Fiber 两个部分,目前完成的 Stack Reconciler 部分分为十五个小节,包含了从渲染函数调用开始介绍 JSX 转化为 DOM 的流程、内部事务处理到组件挂载于与更新流程等等内容;更多 React 相关资料参考。 (

  利用 WebGL 释放 GPU 的计算潜力:随着大数据时代的到来,计算能力日渐成为性能的关键瓶颈之一;而众所周知 GPU 相较于 CPU 有着更为强大的计算能力,本系列文章即是介绍如何利用 WebGL 实现 GPGPU(General Purpose Computing on Graphics Processing Units)高性能计算。本系列文章首先讨论了利用 WebGL 进行 GPGPU 计算的可行性,然后介绍了具体的实施步骤;主要步骤包括矩阵初始化、矩阵计算、结果回传、条件控制、不稳定性处理、样例实践等几个部分。(

  Vue 直出内存泄露问题的追查实践:近期,作者遇到了 Vue 直出内存泄露问题,并进行了追查。其项目背景是,作者在一次规模较大的运营活动中正好碰到了内存泄漏的问题,技术背景和业务背景分别如下:技术背景:node直出项目,直出用到了 Vue 的直出方案;业务背景:一次 PV 最高达到 1400W 的运营活动 qps 的压力下,后期使得服务出现一定错误率。本文将回顾整个追查的实践过程。(

  JavaScript 开发中常用的十大数据结构详解:数据结构是软件开发的重要组成部分之一,也是求职面试中常见的主题之一;本文将回顾介绍 JavaScript 中常用的十大数据结构,并且给出详细的教程与在线实践链接。本文涉及到的数据结构包括链表、栈、队列、集合、映射、哈希表、二叉搜索树、Trie 树、二叉堆、图等;更多数据结构与算法相关资料参考。(

  Ink:Ink 允许我们以类似于编写 React 组件的方式编写命令行交互界面,最大的区别在于 Ink 会将组件渲染为输出到标准控制台的字符串。笔者觉得阅读 Ink 的源代码也是不错地了解简化版的 React 内部运行机制的方式,可以了解基本的 JSX 转换、虚拟 DOM 渲染与比较、批次更新等内容。(

  real-world-react:本仓库搜集了一系列基于 React 开发的真实环境下的开源应用代码库,能够帮助初学者从资深开发者的代码中逐步学习了解 React;应用涵盖了基于 Redux 的各种资讯类应用、常见的音乐播放器等等多个方面。(

  titanic:titanic 为我们提供了一系列有趣的可变的 SVG 图标,这些图标能随着用户的点击或者其他操作做出相应地动画反馈。titanic 提供的动画图标包括了单选框、邮箱、笑脸等等。(

  formik:React 中的表单处理一直是痛点所在,而目前很多的表单处理库添加了太多的抽象,不仅不易于理解而且会造成许多额外的性能损耗。而 Formik 则提供了简便易用的高阶组件来帮你处理将 Props 转化为扁平的 React 状态、自动化字段验证并且进行错误提示、将扁平地 React 状态转化为接口可用的对象这三个任务。(

  微软顶级代码女神给年轻程序员的一些宝贵建议:本文是微软公司全球资深副总裁潘正磊(Julia Liuson)女士做客大咖说的视频回顾和要点总结文。

  Julia目前领导微软全球开发平台工程团队,负责 Visual Studio,. NET 开发框架,C# 语言是担任驱动微软开发工具与开发技术大规模开源化的幕后推手,以及带领全球部门的几千名资深开发者完成迈向 DevOps 的成功转型,让微软从一个三年磨一剑的套装软件公司,成为现在能够在云端上高速迭代交付,与新兴豪杰们匹敌的互联网公司。本文分享了Julia的一些观点:面对日新月异的技术,如何学习与取舍?微软从封闭到开源,转变为哪般?程序员跟年龄关系大吗?如何从程序员迈向领导者?女性程序员应该如何看待自己的职业发展?

  「前端之巅」是InfoQ旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到注明“前端之巅投稿”。

  给InfoQ中文站投稿或者参与内容翻译工作,请邮件至。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

  我们理解您使用ad blocker的初衷,但为了保证InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。

相关阅读