FEX 技术周刊 - 2018/01/15
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
深阅读
The State of JavaScript Frameworks, 2017
https://www.npmjs.com/npm/the-state-of-javascript-frameworks-2017-part-2-the-react-ecosystem
可以了解下整个 JS 生态。另附：The Brutal Lifecycle of JavaScript Frameworks、Frontend in 2018: More consensus, less complexity
Turning Design Mockups Into Code With Deep Learning
https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/
要失业了？不过这种 RNN 一个个区块的方式局限性还是很大
Incident report: npm, Inc. operations incident of January 6, 2018
http://blog.npmjs.org/post/169582189317/incident-report-npm-inc-operations-incident-of
On Saturday, January 6, 2018, we incorrectly removed the user floatdrop and blocked the discovery and download of all 102 of their packages on the public npm Registry. Some of those packages were highly depended on, such as require-from-string, and removal disrupted many users’ installations.
从前端技术到体验科技
https://zhuanlan.zhihu.com/p/32782686
来自玉伯的分享：体验科技，是技术与设计的融合，是服务与用户连接。体验科技是 UX = f(services) 这个公式，能将各种各种的 services（后端服务） 通过技术与设计的融合，转变成体验一流的用户产品。
前端写一个月的原生 Android 是怎样一种体验
https://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652975646&idx=1&sn=99c34d4402d9dff351f4a034c5baf5c4
如果你是一个前端程序员，想学习移动开发；又或者是一个移动开发，想接触前端开发；那么，本文可能就很适合你去了解两者间的差异。本文包含了以下的内容：编码效率 vs 可维护度；MVP vs MV：后天的 MV*；静态语言 vs 动态语言；View 与 DOM；代码调试；兼容性。
如何有效地写算法题
http://www.cnblogs.com/sskyy/p/8268976.html
这篇文章最早发在我团队的文档中。我的团队鼓励每个同学都在业余时间多做算法题，特别是新人。个人认为在编程能力的提升上比做 side project 更有用，对职业发展也是如此。
虽然难用，但12306面临的业务场景复杂度可能是世界之最
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651000407&idx=1&sn=6aeda43f3f5fea36ed6cb513f306746d
又一年的春运售票窗口开启，12306 网站系统即将面临又一次全国性的吊打。每一年的春运都是对 12306 的一次大考，抛去盲从和偏见，让我们用工程师的思维重新打量、从业务分析的角度去探讨，12306 的核心模型设计思路和架构设计到底复杂在哪里？
How We Architected the New Relic Mobile Web UI in React
https://blog.newrelic.com/2018/01/03/mobile-ui-react/
To make it easier for engineers who contribute code to the UI, we’ve created a flexible system, written in React. And since we’ve built this layered architecture from modules, we’ve been able to decouple the different domains of the UI application from each other, thus easing the burdens of contributors. We wanted to share some of the design behind this complex React project because it’s led us to some seriously great outcomes.
React, Redux and JavaScript Architecture
https://jrsinclair.com/articles/2018/react-redux-javascript-architecture/
This article might seem long-winded. I do want to show you how to write actual React and Redux code. But it will take a while to get there. And there is a reason. Redux is not terribly complicated. But with Redux (like React), understanding why you’d want to use it is much more interesting than how it works. So, though it might take us a little while to get to Redux, I think the journey will be worth it. 另附：React Router v4: Philosophy and Introduction
5 practical tips to finally learn React in 2018
https://goshakkk.name/tips-finally-learn-react/
My hope with this article — and my blog and mailing list in general — is to share what I’ve learned in years so that you don’t have to waste time. 另附：8 Tips to Build Better Node.js Apps in 2018、5 Microservices Trends to Watch in 2018
Server Rendering, Code Splitting, and Lazy Loading with React Router v4
https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70
Historically, Airbnb has been a Rails app. A few years back that started to change, we began using Rails simply as a data layer, and all render logic started migrating into JavaScript in the form of React. In order to maintain server rendering, we created and open sourced Hypernova, a JavaScript Rendering as a Service… service. Taking this a step further, we introduced client side routing and route based code-splitting with React Router v3 as part of our architecture revamp.
How Operating Systems Work: 10 Concepts you Should Know as a Developer
https://codeburst.io/how-operating-systems-work-10-concepts-you-should-know-as-a-developer-8d63bb38331f
I want to use this post to share my takeaways from the course, that is the 10 critical operating system concepts that you need to learn if you want to get good at developing software. 另附：Five Things Every Developer Should Know About Software Architecture
How Modern Web Browsers Accelerate Performance: The Networking Layer
https://blog.sessionstack.com/how-modern-web-browsers-accelerate-performance-the-networking-layer-f6efaf7bfcf4
In this post, we’ll try to analyze what techniques modern browsers employ to automatically boost performance (without you even knowing it), and we’ll specifically zoom in on the browser networking layer. We’ll provide some ideas on how to help browsers boost the performance of your web apps even more. At the end, we also share some rules of thumb we use when building SessionStack, a lightweight JavaScript application that has to be robust and highly-performant to help users see and reproduce their web app defects real-time.
Harnessing Code Generation to Increase Reliability & Productivity on iOS at Uber
https://eng.uber.com/code-generation/
In this article, we discuss two common code generation use cases—generating embedded resource accessors and test mocks—to highlight how the technique can be used to make applications more reliable and engineers more productive.
What’s New in HTML 5.2?
https://bitsofco.de/whats-new-in-html-5-2/
In this article, I’ll go over some of the changes I think will impact my development the most. 另附：HTML 5.2 IS DONE, HTML 5.3 IS COMING
Chrome Only? Careful Now
https://css-tricks.com/careful-now/
The web is the best platform to build for and generally heading in a direction that makes that even truer. The easiest way to screw that up is not being careful with standards. 附：Chrome 终究走上了 IE 6 的老路
What Really Happened with Vista: An Insider’s Retrospective
https://blog.usejournal.com/what-really-happened-with-vista-an-insiders-retrospective-f713ee77c239
Ten years have gone by since the original release date of Windows Vista but the lessons seem more relevant now than ever.
A letter about Google AMP
http://ampletter.org/
We are a community of individuals who have a significant interest in the development and health of the World Wide Web (“the Web”), and we are deeply concerned about Accelerated Mobile Pages (“AMP”), a Google project that purportedly seeks to improve the user experience of the Web. 附：Google 的回应
Create Purposeful Information for a More Effective User Experience
http://alistapart.com/article/no-more-faqs-create-purposeful-information-for-a-more-effective-user-experi
Your website should be filled with purposeful content that meets users’ core needs and fulfills your company’s objectives. Do your users and your bottom line a favor and invest in effective user analysis, IA, content strategy, and documentation. Your users will be able to find the information they need, and your brand will be that much more awesome as a result.
Universal Principles Of User Experience Design
https://www.smashingmagazine.com/2018/01/universal-principles-ux-design/
These principles, which should sit at the heart of everything we design and build, are critical and will stand the test of time: Visual Grammar; Language and Typography; Narrative Design.
Golden Ratio. Bring Balance in UI Design
https://uxplanet.org/golden-ratio-bring-balance-in-ui-design-765c954f0ff9
To create an efficient design composition, professionals apply various techniques and methods from the art science as well as the basic mathematical theories. One of the common tools helping to build pleasing design compositions is a mathematical proportion called the golden ratio. In the article, we’ll define the essence of this technique and see how it can be used in design.
新鲜货
San 3.4.0 发布
https://ecomfe.github.io/san/
来自EFE的MVVM组件框架 San 发布 3.4.0。从有想法到现在两年多过去了，我们终于达到最初设想的样子。
TOAST UI Editor
https://nhnent.github.io/tui.editor/
TOAST UI Editor provides Markdown mode and WYSIWYG mode. Someone may like the productivity of Markdown, but the other can be looking for a way to make it easier to edit. The TOAST UI Editor can be the coordinator of both. It offers Markdown mode and WYSIWYG mode, those can be switched at any time during writing content. Work together conveniently in one document.
Angular 5.2 Now Available
https://blog.angular.io/angular-5-2-now-available-312d1099bd81
Improved type checking for templates; Support for TypeScript 2.6; Improved Router Param & Data Inheritance.
Docker for Mac with Kubernetes
https://blog.docker.com/2018/01/docker-mac-kubernetes/
Docker for Mac with beta Kubernetes support is now publicly available as part of the Edge release channel.
The newest apps on GitHub Marketplace
https://github.com/blog/2489-the-newest-apps-on-github-marketplace
REST API monitoring - Moesif, Measuring team dynamics - DeepAffects.
NUXT 1.0.0 Released
https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972
Nuxt.js is a framework on top of Vue.js, vue-router, vuex and vue-meta. You can create a (static generated or universal or single page) web app quickly with the same setup and no build config to write.
NervJS
https://github.com/NervJS/nerv
Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance and better browser compatibility. 京东的前端同学搞的库，据说已经应用于京东PC首页 与 京东旗下TOPLIFE。jQuery 的例子可以看出：当一个经典类库被重复制造时，说明在不远的未来就会有更好的类库出现，不知道 React 也会如此。
react-elemental
https://github.com/LINKIWI/react-elemental
React Elemental is a modern, flat UI library built for React. It is built for maximum development velocity: there is no CSS to import and no additional parameters to add to your Webpack configuration. React Elemental has first-class support for ES6/JSX and works effortlessly with SSR.
Neutrino
https://neutrino.js.org/
Neutrino combines the power of webpack with the simplicity of presets.
Material Design component library for Mithril and React
https://github.com/ArthurClemens/polythene
Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, notifications, lists, buttons, form elements, and more.
Jimp
https://github.com/oliver-moran/jimp
The “JavaScript Image Manipulation Program” :-) An image processing library for Node written entirely in JavaScript, with zero native dependencies.
face-recognition.js
https://github.com/justadudewhohacks/face-recognition.js
Simple Node.js API for robust face detection and face recognition. This a Node.js wrapper library for the face detection and face recognition tools implemented in dlib. 附：介绍
canvas-area
https://github.com/goessner/canvas-area
canvas-area is a lightweight custom html element as a controller parent for one or more canvas elements. It allows zoom, pan and resize interactions.
Scrollama
https://github.com/russellgoldenberg/scrollama
Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
ESM modules in node: npm edition
https://gist.github.com/ceejbot/b49f8789b2ab6b09548ccb72813a1054
We propose that npm provide some useful opinions about how to resolve the impasse, in the form of a design, a working implementation of that design, and a pull request to the node project.
Webpack 4 will work configless by default
https://github.com/webpack/webpack/issues/6244
另：JSON Tree Shaking lands in Webpack 4.0
TC39 to Recommend ‘Consistently Explicit Semicolon Use’
https://github.com/tc39/ecma262/pull/1062
无分号党怎么看？附 由 Brendan Eich 对此发起的讨论
What Spectre and Meltdown Mean For WebKit
https://webkit.org/blog/8048/what-spectre-and-meltdown-mean-for-webkit/
WebKit is affected because in order to render modern web sites, any web JavaScript engine must allow untrusted JavaScript code to run on the user’s processor. Spectre impacts WebKit directly. Meltdown impacts WebKit because WebKit’s security properties must first be bypassed (via Spectre) before WebKit can be used to mount a Meltdown attack. 另附：Meltdown, Spectre, and the State of Technology
HttpLive
https://github.com/gencebay/httplive
The HttpLive is a tool for API designers, Proxy, mobile and web application developers to develop and test their applications faster without being dependent on any server or backend applications.
滴滴云
https://www.didiyun.com/
为开发者而生，诠释简单、安全、高效，打造极致云端体验，与开发者共鸣。为毛每个公司都要搞云，而且往往还限制要对接我的平台必须用我的云来开发…
AndroidGodEye
https://github.com/Kyson/AndroidGodEye
AndroidGodEye is a performance monitor tool for Android(not limited to performance data) , you can easily monitor the performance of your app in real time in pc browser. 另附：GodEye - Swift
WebGL2 Fundamentals
https://webgl2fundamentals.org/
These are a set of articles that teach WebGL2 from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works.
Functional-Light JavaScript
https://github.com/getify/Functional-Light-JS
“Functional-Light JavaScript” explores the core principles of functional programming (FP) as they are applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call “Functional-Light Programming” (FLP) and apply it to JavaScript.
产品及其它
Advice for First Time Founders
https://blog.ycombinator.com/advice-for-first-time-founders/
Recently on Bookface Zach Dixon, cofounder of the gaming company Players’ Lounge (W18), asked a great question: 1. What are some things that you should’ve known as a first-time founder but did not? 2. How did you learn them? 3. How did they help? There were so many useful answers that we’re going to share them here. The numbered answers are replies to the three questions above. The lettered answers are multiple answers to the main question.
CES 2018 极客公园特别报道
http://www.geekpark.net/topic/265
围观下高科技，另附：CES 2018十大技术产品盘点
2017年度中国app报告：流量向下走，边界在消失
http://36kr.com/p/5112203.html
2017火起来的很多app，自己都不会玩。是我老了吗？是我落伍了吗？又或者是，小镇青年已经成为了移动互联网世界的主流？2017年过去了，你是否怀念它？在这一年，改变不声不响地发生着。猎豹全球智库从数据出发，带你俯瞰移动互联网行业大震荡。
豆瓣内容副总经理 - 知识付费，下半场怎么走
https://mp.weixin.qq.com/s?__biz=MzA5MTMyNzAzMQ==&mid=2651543154&idx=1&sn=6e379933245adc4c36cccf6d22789387
真正的知识值得付费。正如有着悠久历史的出版业和教育业，在互联网时代，依旧能够依附在技术之上，有新的改革和创新。而现在的数字阅读和在线教育其实也是知识付费的一种方式。知识付费会继续发展和进化。正如现阶段音频成为了知识付费一种主要形式，而上一阶段是在5-10年前，网络创作是知识付费的主要形式；未来，知识付费会随着技术的发展和进步继续进化。
beautiful-docs
https://github.com/PharkMillups/beautiful-docs
Pointers to useful, well-written, and otherwise beautiful documentation.
– THE END –
