FEX 技术周刊 - 2017/05/08
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
深阅读
Prepack
https://prepack.io/
Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations. 附：prepack-webpack-plugin.
Elements of JavaScript Style
https://medium.com/javascript-scene/elements-of-javascript-style-caa8821cb99f
The following are guidelines, not immutable laws. There may be valid reasons to deviate from them if doing so clarifies the meaning of the code, but be vigilant and self-aware. These guidelines have stood the test of time for good reason: They’re usually right.
Glossary of Modern JavaScript Concepts: Part 2
https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/
In the first part of the Glossary of Modern JS Concepts series, we learned about functional, reactive, and functional reactive programming. In Part 2, we’ll gain an understanding of concepts like scope, closures, tree shaking, components, and more, as well as JavaScript application topics such as data flow and change detection.
Why I’m Moving on to Web Components and Not Looking Back
https://hackernoon.com/why-im-moving-on-to-web-components-and-not-looking-back-aa8028c99c83
Certainly it will take a few more years before large companies are comfortable taking the plunge and ending support for users that have not updated their web browsers. But a truly wonderful world awaits when they do. I hope I am correct in predicting that the complexity and code proliferation in web development, after increasing for many years, is about to take a nose dive. The features that these libraries and frameworks provide have arrived in the “operating system” itself — the web browser. No pre-processors now. Just code.
Energizing Atom with V8’s custom start-up snapshot
https://v8project.blogspot.com/2017/05/energizing-atom-with-v8s-custom-start.html
Native Electron apps, including Atom, leverage Chromium to display a GUI and Node.js as an execution environment, both of which respectively embed V8 to run JavaScript. This allows Electron apps to take advantage of V8 snapshots to quickly initialize a previously serialized heap for faster startup. Electron developers have even released electron-link, a convenience library for setting up this feature, which Atom heavily relies on for its performance optimizations.
Nest - Node.js framework built on top of TypeScript
https://kamilmysliwiec.com/nest-final-release-is-here-node-js-framework-built-top-of-typescript
Nest is a powerful web framework for Node.js, which helps you effortlessly build efficient, scalable applications. It uses modern JavaScript, is built with TypeScript and combines best concepts of both OOP (Object Oriented Progamming) and FP (Functional Programming). GitHub: https://github.com/kamilmysliwiec/nest
支付宝前端构建工具的发展和未来的选择
https://github.com/pigcan/blog/issues/4
下文说说我理解的支付宝前端构建工具发展史，从 spm 到 ant tool，再到未来我们可能会走的路。
V8 Ignition：JS 引擎与字节码的不解之缘
https://zhuanlan.zhihu.com/p/26669846
很多 JS 引擎都是采用了字节码这一脚本语言实现技术的，而 v8 一枝独秀，走“纯机器码”路线，其实过于激进了：虽然执行性能上可以登峰造极，但却带来了内存占用过大的问题。这次引入字节码实则是做了工程上的恰当取舍，将损失掉的内存找回来，更加符合如今移动和嵌入式设备为主的应用场景；以时间换空间，让 v8 能更好的服务于低内存的设备。如今 V8 也回到了字节码的怀抱，不禁令人感叹 JS 引擎与字节码真是有着不解之缘！这个专栏还有很多 Node 及 V8 相关的资料，感兴趣的可以关注。
月活8.89亿背后：微信工程师细数兼容测试经验
http://wetest.qq.com/lab/view/306.html
微信的自动化测试
大数据浪潮下的前端工程师
https://mp.weixin.qq.com/s?__biz=MzUyOTA1NTkzNw==&mid=2247483719&idx=1&sn=48eca5f7bd71f515e18f7b4aa4325a78
我作为一名前端工程师，在阿里巴巴数据团队工作多年，深入了解数据生产加工链路与产品化。我们这群前端是与界面最近的工程师们，似乎与数据离得很远，对于我们来说与数据有些怎样连接呢。
今日头条Go建千亿级微服务的实践
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650996069&idx=1&sn=63e7f5d5f91f9d84f1c3278426f6edf6
今日头条当前后端服务超过80%的流量是跑在 Go 构建的服务上。微服务数量超过100个，高峰 QPS 超过700万，日处理请求量超过3000亿，是业内最大规模的 Go 应用。
企业的应用架构到底该怎么演变才能合了CEO的愿
https://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599230&idx=1&sn=cbf97ea56f956e23b3529ea81551b23c
企业信息化建设已经发展了几十年，传统企业和成熟互联网企业的应用架构并没有本质的区别。本文将通过一个线下小型门店成长为多元化集团的发展历程，逐步向读者展示企业应用架构的演变和设计的理念。
Mastering the Node.js Core Modules - The File System & fs Module
https://blog.risingstack.com/mastering-the-nodejs-core-modules-file-system-fs-module/
In this article, we’ll take a look at the File System core module, File Streams and some fs module alternatives.
Why does Google prepend while(1); to their JSON responses?
http://stackoverflow.com/questions/2669690/why-does-google-prepend-while1-to-their-json-responses
It prevents JSON hijacking.
Redesigning Uber Engineering’s Mobile Content Delivery Ecosystem
https://eng.uber.com/mobile-content-delivery/
In this article, we discuss the technical challenges we encountered—and solutions we developed—while building a new content feed and corresponding backend ecosystem for the app.
Building Express Backbone: Facebook’s new long-haul network
https://code.facebook.com/posts/1782709872057497/building-express-backbone-facebook-s-new-long-haul-network/
As new data centers were being built, we realized the need to split the cross-data center vs Internet-facing traffic into different networks and optimize them individually. In a less than a year, we built the first version of our new cross-data center backbone network, called the Express Backbone (EBB), and we’ve been growing it ever since.
Deploy with haste: the story of rig
https://tech.buzzfeed.com/deploy-with-haste-the-story-of-rig-ca9a58b5719a
This is a tale of infrastructure evolution. In the span of 12 months, we went from large, release-oriented deploys to an architecture and approach that enabled 150+ deploys a day. Getting there wasn’t easy, but we learned a lot along the way…
Augmented camera previews for the Dropbox Android Document Scanner
https://blogs.dropbox.com/tech/2017/05/augmented-camera-previews-for-the-dropbox-android-document-scanner/
With Dropbox’s document scanner, a user can take a photo of a document with their phone and convert it into a clean, rectangular PDF. In our previous blog posts (Part 1, Part 2), we presented an overview of document scanner’s machine learning backend, along with its iOS implementation. This post will describe some of technical challenges associated with implementing the document scanner on Android.
How to Get into VR
https://blog.ycombinator.com/how-to-get-into-vr/
In this post, we’ll explore why it’s an exciting time to get into VR now–both for consumers and developers. Then, we’ll discuss how a wide range of interdisciplinary fields have pushed the technology forward. Lastly, we’ll identify concrete ways in which you can get started.
Designing Voice Experiences
https://www.smashingmagazine.com/2017/05/designing-voice-experiences/
Voice-based interfaces are becoming commonplace. A new interface does not mean that we have to disregard everything we have successfully applied to previous interfaces; we will need to adapt our process for the nuances of voice-driven interfaces, including conversational interactions and the lack of a screen. We will look at how a typical genie in a bottle works, discuss the steps involved in designing voice experiences, and illustrate these steps by designing a voice app for Alexa.
Programming as a Way of Thinking
https://blogs.scientificamerican.com/guest-blog/programming-as-a-way-of-thinking/
Modern programming languages are qualitatively different from their predecessors, but we are only beginning to realize the implications of that difference. In a companion article, I present more ways to use Python to think, explore, learn, and teach.
SQL is 43 years old - here’s 8 reasons we still use it today
http://blog.sqlizer.io/posts/sql-43/
The simple fact that both arrived early in the life of computing, and that for 90% of the time they just work, means databases have become a ‘solved problem’ you no longer need to think about. But people do use other other email automation software and payment solutions, just like people use NoSQL databases. Yet even with other database technology available, albeit less mature technology, SQL still reigns and reigns well. So, finally, here are 8 reasons we still use SQL 43 years after it was first cooked up.
新鲜货
Getting Started with Headless Chrome
https://developers.google.com/web/updates/2017/04/headless-chrome
A headless browser is a great tool for automated testing and server environments where you don’t need a visible UI shell. For example, you may want to run some tests against a real web page, create a PDF of it, or just inspect how the browser renders an URL.
pkg - Package your Node.js project into an executable
https://github.com/zeit/pkg
This command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.
YouTube’s redesign is official
https://arstechnica.com/gadgets/2017/05/youtubes-desktop-site-gets-a-material-design-makeover-asks-for-feedback/
YouTube’s new interface is built on Google’s Polymer framework, a JavaScript library for creating Web components with a focus on creating Material Design-style apps on the Web.
Progressive Web Apps Training
https://developers.google.com/web/ilt/pwa/
This course shows you how to convert web pages to PWAs. A PWA is not an API or a technology, but it is a web development approach that uses a combination of tools and technologies already available to create targeted, ideal user experiences. It shows how to use service workers, APIs, and an application shell architecture for meaningful offline experiences, fast first load, and easy user reengagement upon repeat visits.
ECMAScript modules in browsers
https://jakearchibald.com/2017/es-modules-in-browsers/
ES modules are starting to land in browsers! They’re in… Safari 10.1; Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags; Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config; Edge 15 – behind the Experimental JavaScript Features setting in about:flags.
Electrino
https://github.com/pojala/electrino
A desktop runtime for apps built on web technologies, using the system’s own web browser engine. Electrino is an experimental featherweight alternative to the popular and powerful Electron. It implements a minuscule portion of the APIs available in Electron, but the output app size is much smaller. A “Hello World” app takes 115 MB using Electron, but only 167 kB using Electrino，详见：Put your Electron app on a diet with Electrino.
anime.js
http://anime-js.com/
Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.
Create Next App
https://github.com/segmentio/create-next-app
The easiest way to create a React app with server-side rendering thanks to Next.js
node-qrcode
https://github.com/soldair/node-qrcode
QR code/2d barcode generator.
GitHub 项目徽章的添加和设置
https://github.com/EyreFree/GitHubBadgeIntroduction
如何更好滴向他人展示自己的项目，介绍项目相关信息呢？用一些通用的小图标来描述项目相关信息不失为一种很棒的选择，几个好看的徽标能够为自己的项目说明增色不少！
Visual Studio Code 1.12
https://code.visualstudio.com/updates/v1_12
周围越来越多人用了
Jenkins Blue Ocean 1.0
https://jenkins.io/projects/blueocean/
Blue Ocean rethinks the user experience of Jenkins. Designed from the ground up for Jenkins Pipeline, but still compatible with Freestyle jobs, Blue Ocean reduces clutter and increases clarity for every member of the team.
Typefont
https://github.com/Sirvasile/Typefont
This project tries to recognize the font of a text in a photo using a set of algorithms and libraries. The goal is to obtain accurate results with the image as only input avoiding other manual processes. This is the only open source project of its kind.
WebSlides - Create HTML presentations in seconds
https://github.com/webslides/webslides/
WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.
javascript game
https://javascript-game.firebaseapp.com/
测试一下你认识多少个 JS 库的 logo
OnlineSchemaChange
https://github.com/facebookincubator/OnlineSchemaChange
OnlineSchemaChange is a tool for making schema changes for MySQL tables in a non-blocking way. 另附：OnlineSchemaChange rebuilt in Python
MapSCII - The Whole World In Your Console
https://github.com/rastapasta/mapscii
MapSCII is a Braille & ASCII map renderer for your console - enter => telnet mapscii.me <= on Mac and Linux, connect with PuTTY if you’re using Windows.
Spring 5 Reactive Web
https://dzone.com/articles/spring-5-reactive-web-services
Interested in learning how to use Spring 5 to do reaction web development? Let this article serve as your one-stop shop on the topic.
产品及其它
[译]四五十岁之后，还在编程的程序员都有谁
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650996096&idx=1&sn=e698467a16d3842c891b477d5e3d846f
关于程序员是不是吃青春饭的讨论由来已久，对于那些步入中年的程序员来说，似乎不转管理岗就会被富有活力的年轻程序员替代。但总有些顶级的软件开发者，不愿意从事管理岗位，仍然活跃在一线写着代码。
什么是好产品？
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653434095&idx=1&sn=ea892392ec474e87df7acb8320057733
可以恰到好处的满足用户需求，拥有完善的技术实现方式，同时可健康持续的创造商业价值的产品，就是「好产品」。另附：如何打造 “好用” 的应用
李明远：现在还是不是做产品最好的时代
https://mp.weixin.qq.com/s?__biz=MzA5ODMzMDkzOA==&mid=2661080887&idx=1&sn=4dda6d53f4ebe937e6a73be3f366d8cb
什么是产品？你必须先把公司里那些描述产品的功能定义、模块素描的文档统统清零。抛开这些表面，跟着李明远好好琢磨琢磨：产品的本质，到底是个什么东西。真正的产品，是去满足用户需求痛点、给用户创造快感，或者成本节约带来的感受。这种感受既可感知，也有可能不可感知。
– THE END –
