2017年Facebook代碼工具.pdf

1、Building Nuclide Facebook Engineering ManagerSoftware Engineer Introduction and History Architecture Innovations Remote Development Introduction One IDE to Rule Them All Platforms iOS,Android,Web,React Native Supported Languages PHP/Hack,JS/Flow,Objective-C,C+,Python,OCaml,GraphQL Features OSS Remot

2、e development Source control integration(Git,Mercurial)Buck integration Debugger More 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.History Birth of Nuclide In 2014-2015,Fa

3、cebook became a mobile first company.Intellij and Xcode did not scale for us.History-Nuclide Nuclide!Desktop IDE based on Atom OSS Familiar web technology and fast development cycle Growing package ecosystem Extensibility as first citizen Decision:merge the force,build feature parity on Nuclide Deve

4、lopment 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.Why Nuclide for Facebook Whats special about Facebook?Remote development Multiple languages/projects in daily developme

5、nt Why Nuclide for Facebook One IDE to rule them all.Open platform.Tailored for Facebook.Deep integration with Facebook tool chain.Remote development.Introduction and History Architecture Innovations Remote Development Architecture Design Principles Electron vs Atom vs Nuclide Language services Debu

6、gger Nuclide Remoting Framework Technologies Stack(Skim)Design Principles Cross platform Remote development Extensibility as first citizen Repo vs Project:impacts search,scalability from beginning Architecture Overview Nuclide Atom package providing IDE features Atom Extensible editor based on Elect

7、ron Electron Framework for building native application with web technologies Language Services Features oAutoCompletion,Go To Definition,Type Hint,Type Coverage.oContext View,Outline view oType Checking Diagnostics oOn fly type checking without saving.Support Languages oPhp/Hack oC+oJS/Flow oPython

8、oOthers(Swift,GraphQL,Ocaml etc?)Different from compiler oCompiler normally run once against static files on disk oLanguage service does type checking frequently against dynamic file content in memory buffer(editor)oChallenge:including the entire file contents in each language service request would

9、be extremely inefficient Extensibility oEvery easy to plugin a new language(One intern adds the Python language support in 2 months)oVSCode protocol compatible plugin Autocomplete Diagnostics Type Hint Context View Language Service Architecture Debugger Support Languages/Platforms oPhp/Hack oC+oNode

10、 JS oReact Native Features oGeneral:launch/attach,stepping,callstack,threads,watch/locals/datatip,REPL console,single thread stepping,pause on exception etc?oHHVM/PHP:function evaluation triggering breakpoint oC+:LLDB console-based debugger commands Extensibility oFirst class API for customizing lau

11、nch/attach UI oVSCode Debugger Compatible C+/Native Debugger Function Evaluation Triggering breakpoint(HHVM-only)Part1 Function Evaluation Triggering breakpoint(HHVM-only)Part2 Function Evaluation Triggering breakpoint(HHVM-only)Part3 Runtime Architecture Nuclide Remoting Framework RPC system enable

12、s transparently call a function/method either locally or remotely on another machine.Enable code reuse oOne package implementation can be used/called in both local and remote scenarios without written twice.Interface definition language(IDL)oWritten in JS language oCombine of ES6 module exports and

13、Flow type definitions oUses 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.Transportation neutral:customizable transportation layer(e.g.websocket,stdin/stdout,soc

14、ket,shared memory etc?)RPC Architecture Technologies Stack Node.js ES6/ES7 Flow Reactive Programming React JS+Flux 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 u

15、sing pattern matching Class definition and inheritance Async programming await and promise 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 sup

16、port in Nuclide Dogfooding everyday by Nuclide team Realtime feedback Reactive Programming Benefits Functional?less mutation,avoid stateful program Less code Async error handling.RxJS is a library for reactive programming using Observables,to make it easier to compose asynchronous or callback-based

17、code.!React JS+Flux React JS A JavaScript library for building user interface Declarative Component-Based Flux Introduction and History Architecture Innovations Remote Development Innovations in Nuclide Remote development Quick Open Diff View Phabricator Integration Working Sets Etc.Quick Open Diff

18、View Diff View Editable,not read only Easy to locate changes Old code to provide context Only available on Mercurial Without Diff View Diff View Phabricator A code collaboration tool that was initially built in Facebook.It includes features such as code review and repository browsing Open sourced in

19、 2010.Phabricator Phabricator Integration Phabricator Integration Review comments inline where the code is Navigation and check progress Reply to comments Today only available internally Phabricator Integration Phabricator Integration Phabricator Integration Introduction and History Architecture Inn

20、ovations Remote Development Advantages of Remote Development Thin client Heavy computation power No deployment Resource sharing Mobility Secure Challenges in Remote Development Disconnection Latency,latency,latency Security vs user experience.Offline mode The Next Step of Remote Development On Demand Nuclide On Demand Nuclide Why On Demand Nuclide Perfect for small code changes,big repo Multi-tasking No server and repo management Share diffs easily On Demand Nuclide How Do I Get Started https:/nuclide.io/