AS2017 《Facebook代码工具》 黄力菲,谭映辉

2020-03-01 273浏览

  • 1.Building Nuclide @ Facebook 黄力菲 谭映辉 Engineering Manager Software Engineer
  • 2.
  • 3.
  • 4.黄力菲 Engineering Manager l 黄力菲(Leo Huang)：现在Facebook任 Engineering Manager。2010年至今在Facebook 带领团队开发了开源开发工具Nuclide 以及代码 审核工具Phabricator。目前主管产品性能测试工 具和平台的开发。2002-2010在微软从事Visual Studio SQL Server引擎和智能个人设备的开发 工作。毕业于清华大学自动化系 州立大学计算机系获硕士学位。 在美国俄亥俄
  • 5.谭映辉 Software Engineer l 谭映辉(Jeffrey Tan)：Facebook开发工具资深 专家。2009-2015 就职于美国Microsoft总部从事 Visual Studio Debugger的开发工作。2015-2017 就职于Facebook 从事代码审核工具Phabricator 的开发 后加入开源开发工具Nuclide的开发 主 管编译器和调试器相关领域。毕业于复旦大学数 学系。
  • 6.• Introduction and History • Architecture • Innovations • Remote Development
  • 7.Introduction
  • 8.
  • 9.One IDE to Rule Them All • Platforms • • iOS, Android, Web, React Native Supported Languages • PHP/Hack, JS/Flow, Objective-C, C++, Python, OCaml, GraphQL
  • 10.Features • OSS • Remote development • Source control integration (Git, Mercurial) • Buck integration • Debugger • More
  • 11.History – Before Nuclide • 2013-2014 Web IDE •Target:web development • Zero install • Cross-platform • Web for web • Remote development as the first citizen •Cons:security was a challenge.
  • 12.
  • 13.History – Birth of Nuclide • In 2014-2015, Facebook became a mobile first company. • Intellij and Xcode did not scale for us.
  • 14.History - Nuclide • • Nuclide! Desktop IDE based on Atom • OSS • Familiar web technology and fast development cycle • Growing package ecosystem • Extensibility as first citizenDecision:merge the force, build feature parity on Nuclide
  • 15.Development of Nuclide • • Core teams •MPK:UI, Android •Seattle:debugger, languages, source control Contributors • Hack team, Flow team, GraphQL, etc. • Anybody can contribute to Nuclide, even an intern.
  • 16.Why Nuclide for Facebook • What’s special about Facebook? • Remote development • Multiple languages/projects in daily development
  • 17.Why Nuclide for Facebook • One IDE to rule them all. • Open platform. • Tailored for Facebook. Deep integration with Facebook tool chain. • Remote development.
  • 18.• Introduction and History • Architecture • Innovations • Remote Development
  • 19.Architecture • Design Principles • Electron vs Atom vs Nuclide • Language services • Debugger • Nuclide Remoting Framework • Technologies Stack(Skim)
  • 20.Design Principles • Cross platform • Remote development • Extensibility as first citizen • Repo vsProject:impacts search, scalability from beginning
  • 21.Architecture Overview Nuclide Atom package providing IDE features Atom Extensible editor based on Electron Electron Framework for building native application with web technologies
  • 22.Language Services Features o o o o AutoCompletion, Go To Definition, Type Hint, Type Coverage. Context View, Outline view Type Checking Diagnostics On fly type checking without saving. Support Languages o o o o o Php/Hack C++ JS/Flow Python Others(Swift, GraphQL, Ocaml etc ) Different from compiler o o o Compiler normally run once against static files on disk Language service does type checking frequently against dynamic file content in memory buffer(editor)Challenge:including the entire file contents in each language service request would be extremely inefficient Extensibility o o Every easy to plugin a new language(One intern adds the Python language support in 2 months) VSCode protocol compatible plugin
  • 23.Autocomplete
  • 24.Diagnostics
  • 25.Type Hint
  • 26.Context View
  • 27.Language Service Architecture
  • 28.Debugger Support Languages/Platforms o o o o Php/Hack C++ Node JS React Native Features o o oGeneral:launch/attach, stepping, callstack, threads, watch/locals/datatip, REPL console, single thread stepping, pause on exception etc HHVM/PHP:function evaluation triggering breakpointC++:LLDB console-based debugger commands Extensibility o o First class API for customizing launch/attach UI VSCode Debugger Compatible
  • 29.C++/Native Debugger
  • 30.Function Evaluation Triggering breakpoint(HHVM-only) – Part1
  • 31.Function Evaluation Triggering breakpoint(HHVM-only) – Part2
  • 32.Function Evaluation Triggering breakpoint(HHVM-only) – Part3
  • 33.Runtime Architecture
  • 34.Nuclide Remoting Framework • • • • RPC system enables transparently call a function/method either locally or remotely on another machine. Enable code reuse o One package implementation can be used/called in both local and remote scenarios without written twice. Interface definition language(IDL) o Written in JS language o Combine of ES6 module exports and Flow type definitions o Uses Babylon parser to parse it Features/Components •TypeRegistry:marshal/unmarshal runtime objects/data into transportable JSON format data. •ObjectRegistry:call by reference vs call by value. • Transportationneutral:customizable transportation layer(e.g. websocket, stdin/stdout, socket, shared memory etc )
  • 35.RPC Architecture
  • 36.Technologies Stack Node.js ES6/ES7 Flow Reactive Programming React JS + Flux
  • 37.JavaScript ES6/ES7 Babel transpiler Scoping • let and const • block scope functions Template string const customer = {name:"Foo" }; const message = `Hello ${customer.name}`; Export and Import Destruction using pattern matching Class definition and inheritance Async programming • await and promise
  • 38.Flow A JavaScript type checker designed by Facebook. • • • • Flow checks your code for errors through static type annotations Type Inference using data flow analysis Gradual adoption for legacy codebase First class support in Nuclide • Dogfooding everyday by Nuclide team • Realtime feedback
  • 39.Reactive Programming RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. ! Benefits • Functional less mutation, avoid stateful program • Less code • Async error handling.
  • 40.React JS + Flux React JS • • • A JavaScript library for building user interface Declarative Component-Based Flux
  • 41.• Introduction and History • Architecture • Innovations • Remote Development
  • 42.Innovations in Nuclide • Remote development • Quick Open • Diff View • Phabricator Integration • Working Sets • Etc.
  • 43.Quick Open
  • 44.Diff View • Diff View • Editable, not read only • Easy to locate changes • Old code to provide context • Only available on Mercurial
  • 45.Without Diff View
  • 46.Diff View
  • 47.Phabricator • A code collaboration tool that was initially built in Facebook. • It includes features such as code review and repository browsing • Open sourced in 2010.
  • 48.Phabricator
  • 49.Phabricator Integration • Phabricator Integration • Review comments inline where the code is • Navigation and check progress • Reply to comments • Today only available internally
  • 50.Phabricator Integration
  • 51.Phabricator Integration
  • 52.Phabricator Integration
  • 53.• Introduction and History • Architecture • Innovations • Remote Development
  • 54.Advantages of Remote Development • Thin client • Heavy computation power • No deployment • Resource sharing • Mobility • Secure
  • 55.Challenges in Remote Development • Disconnection • Latency, latency, latency • Security vs user experience. • Offline mode
  • 56.The Next Step of Remote Development
  • 57.On Demand Nuclide
  • 58.On Demand Nuclide
  • 59.Why On Demand Nuclide • Perfect for small code changes, big repo • Multi-tasking • No server and repo management • Share diffs easily
  • 60.On Demand Nuclide
  • 61.How Do I Get Started •https://nuclide.io/
  • 62.
  • 63.