Flow Blog

I just listened to this podcast[0], and there's a really great discussion in there about when it's nice to have types, and when it's more trouble than it's really worth. That's why javascript's flow[1] appeals to me so much, and I'm really interested in core.typed. [0] http://giantrobots.fm/172 [1] http://flowtype.org

Did you also consider Flow[0] as an alternative? I'm now using ES6 with Babel to build some small side-projects and it has been a great experience. But as the codebase grows, I'd appreciate to add some Flow type annotations. Typescript looks great but it's still not JS. I wonder what will happen to all those compile-to-JS languages once ES6 becomes supported everywhere. [0]: http://flowtype.org/

Thanks for confirming my guess that the type inference was the trickiest part. These days, I guess Flow (http://flowtype.org/) would also be worth studying. Edit: Or PyPy's RPython.

I've greatly enjoyed writing CoffeeScript, but am concerned that over the long term, it will fall behind javascript in terms of feature support. The [Babel][1] transpiler (formerly 6to5) and tooling like Facebook's typechecker, [flow][2] have large teams and a rapid pace of development. I don't want to miss out on cool features like generators, let/const, etc just for CoffeeScript's lovely bracket-less code. [1]: https://babeljs.io/ [2]: http://flowtype.org/

Looks like a great tool. The documentation at http://flowtype.org/ is excellent. Should be easy to add it to a Gulp/Grunt workflow.

I love JS (pretty unpopular opinion here on HN) and I love Rust also and I'm not convinced using Rust on front-end tasks would have any benefits. Yet, I strongly disagree with you on this point : > Rust is a low level systems programming language, it's very suboptimal for high level front end code from productivity standpoint Rust's type system is wonderful, and it's a real productivity boost. Fortunately people at Facebook developed an equivalent for JavaScript [1] because living without it would be really hard for me now. Furthermore, Rust offers a lot of syntactic sugar that makes it feel like a really high level language (compared to C, Go or even JavaScript pre-ES6 for instance). >it's advantages (mem safety with 0 cost abstractions) don't really matter in frontend It's indeed one of Rust selling point (especially for people coming from a C background) but it's not the only one. My favorite being the data-race free parallelism. I don't know the current status of multi threading in wasm, but being able to take advantage of all the cores of mobile devices could really help front-end frameworks. [1]: http://flowtype.org, it's not inspired by Rust but inspired by OCaml, which also inspired Rust.

> What Go does better than Nodejs is a better standard library What is so hard about `require('lodash')`, or `require('moment')`? > true concurrency The trade-off is you get great concurrency without thinking about it. If you are working in Go, you have to start thinking about it as you go. You can always think about it as you go with Node.js if you want, but you don't have to and you will still get quite far. > static typing See http://flowtype.org or http://www.typescriptlang.org. With more advanced type systems than Go. > With Go it doesn't matter if an operation is blocking or non blocking, that fact can totally be abstracted from the client code. Writing callbacks is tedious, promises are tedious, co routines with yield need plumbing and async isn't in the spec. You can use ES7 async/await and promises today. That it "isn't in the spec" probably won't be for too much longer. async function() { const {data} = axios.get('foo') const results = [] const arr = ['foo', 'bar', 'baz'] for (const i in arr) { results[i] = await axis.get(arr[i]) } return results }

No love for react-devtools [0]? I'm amazed it wasn't even an honorable mention, considering he mentioned react and redux (which is probably generally used with react). I'm also surprised he didn't mention flowtype [1], which is by Facebook and is supported by Babel! If you're writing React, you're probably already using Babel, so using flow is very low friction. Furthermore, if you're interested in runtime assertions, you can use babel-plugin-typecheck [2], which will convert your flowtype annotations into assertions. If we're looking to be pragmatic, IMO, this is the optimal path to take. The library that Elliot is working on looks interesting, but even he recognizes in its page that it's still a work-in-progress. If you're writing a modern JS app and you wanna take advantage of all the ES6 goodies, you'll pick up babel. And if you're using babel, you can get jsx and flowtype for free. It's ridiculous to try and build a JS app without some sort of bundler, whether it's browserify or webpack. And if you're gonna use a bundler, pulling in a transpiler like babel is really easy and it lets you write much saner code. Oh, and if you're already drinking the Facebook kool-aid with react, jsx, and flowtype, you'll wanna give nuclide a shot. As I understand it, it has nice flow support, with stuff like "click-to-define" and inline linting [3]. I'm using flowtype annotations with the babel plugin I mentioned above, but due to my usage of non-standard features, I can't…

It's a balance, but I am fairly disappointing that such an up-and-coming language has such a limited type system. In the days where even traditionally fully untyped languages are moving toward inferred, optional and static typing [1],[2],[3] I'm disappointed to see `interface {}` sprinkled throughout Go API's. [1] JS Typescript and flow: https://www.typescriptlang.org/, https://flowtype.org/ [2] Python with mypy: http://mypy-lang.org/ [3] PHP with Hack: http://hacklang.org/

https://flowtype.org/ function bar(x): string { That's not JavaScript.

With flow you can do one better: type comments! https://flowtype.org/blog/2015/02/20/Flow-Comments.html You actually wrap the type annotations in comments and flow will recognize them. You can use the source with the type comments in your browser! As an example, the flow checker will read the annotations from `function f(n/:number/, s/:string/) { ... }` but since they are commented in the source code your JS engine ignores them. This is amazing for typing existing code, since at every step you are merely inserting comments into your code. And your existing minification step will strip them out :)

Off topic but the name, Flow, will get confusing fast. Flow is already used by several projects including Facebook's Flow, a direct competitor to Microsoft Typscript. Meanwhile FlowType.js helps with typography. Not to be confused with Flowjs, which is for HTML5 file transfer. This is probably going to end up in a search ranking dance off with whoever has the deepest pockets winning. https://flowtype.org http://simplefocus.com/flowtype/ https://github.com/flowjs

The sanctioned way forward for React is Flow. It's not as comprehensive as TypeScript, but there's no compilation required - Flow annotations just get stripped out. As of a couple of weeks ago it is part of create-react-app. https://flowtype.org

If you want to build things with interfaces that users use, I implore you to reconsider JavaScript. First of all, it's a powerful functional language (https://www.youtube.com/watch?v=ya4UHuXNygM). React and Redux are heavily inspired by functional languages, and the two can be used on the server-side as well (which, if you're serious about web development, is going to be important). With React Native (https://facebook.github.io/react-native/), sharing code becomes even easier for mobile development without really sacrificing the quality of the end-result (no more WebViews). If you want JS to have a type-system, consider TypeScript (https://www.typescriptlang.org/), or if you want a more powerful ML-like type-system consider using Flow (https://flowtype.org/).

Facebook still uses Flux, and it was created specifically for large applications. The thing which is missing from this example is some kind of namespacing. In a large application, you should be naming your action types in such a way that it is not confusing which application feature they relate to, eg. if you had domain logic relating to something called 'UserProfile', you might have an action like `USER_PROFILES/UPDATE_PHOTO`. Combined with sensible project layout and file naming (eg. by domain) this should make it easy to track down code relating to a particular action. It also makes for excellent 'greppability'. If you're using a JS typechecker like Flow (and IMO if you're building a large app, you should) you can even make use of disjoint unions to type your Flux action objects: https://flowtype.org/blog/2015/07/03/Disjoint-Unions.html

flow (http://www.flowtype.org) is also an alternative. Developed at Facebook.

It's definitely most useful when combined with type annotations. They're complementary tools, annotations can ensure type safety at compile time, but type safety is only one part of program correctness, whereas contracts can validate just about any aspect of program operation because they have access to all of the runtime information. They're like unit tests that run all the time (until you strip them in production at least). This thing can be used alongside Flow[0] and other babel plugins which use flow syntax. [0] https://flowtype.org/

Do you have the same complaints about optional parameters too? let x = (id: number, name?: string) => { return; }; Is it abuse to use interfaces as well? They are not present in vanilla JS. How about React's move away from React.createClass({}) to ES6 classes extending React.Component? Do they abuse classes? Async/await is coming too and it will turn JS on its head, does eschewing callbacks for async functions also count as abuse? I won't even get into generics as that's a whole different can of worms. Microsoft and the TS team have issued a mandate that TypeScript will always be a superset of EcmaScript and if ES2019 includes decorators that are incompatible with TypeScript's then it will be addressed at that time. TypeScript was never meant to be just type annotations+ES6, there is Flow[1] for that. [1] https://flowtype.org/

I had the same dream... so I started using Flow[0]! Put all of my codebase in /* @flow weak */ to start, then slowly tightened it up with more type hints, declarations, etc. [0] http://flowtype.org/

It's competitor from facebook (http://flowtype.org/) is also really fast during development as well, even for sweeping changes across big sections of the code base.

And for those stuck using javascript but with they had static typing there is: http://flowtype.org/ The arguments for flow seem to resonate nicely with the points raised in the article.

If type safety was the issue, couldn't they have tried Facebook's Flow[1] which believe would have reduced the technical overhead by large? [1]: http://flowtype.org/

Here's a quick link to the project page itself: http://flowtype.org/

Btw, flow (http://flowtype.org) already comes with React propTypes integration. When you write `x: React.PropTypes.number.isRequired`, it knows how to correctly translate that to static types.

I think really what happens is Node enables a new type of stack[1]. It doesn't actually really step on anything new the SPA's aren't already doing. Instead it moves to become isomorphic, so initial render is done by Node, but still the data sources, validation, and heavy backend logic all stays behind an API. That API could certainly be Erlang powered. Also to respond to your points... 1. This I see as the most valid argument, but not a deal-breaker (see Walmart, LinkedIn using Node without problems scaling). 2. Check out Flow by Facebook [2] or TypeScript. 3. Not true with require/modules. 4. It's incredibly easy to include a JSLint file in your repo and as a git hook. [1] http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ [2] http://flowtype.org/

If you are interested in learning more about Flow check out the docs [1] and github repo [2]. [1] - http://flowtype.org/ [2] - https://github.com/facebook/flow

From my perspective, the static type checking is more or less the same as TypeScript's `--noImplicitAny` option as the first example on flowtype [1] shows, the same can be achieved with tsc --noImplicitAny hello.tsc which will result in hello.ts(2,14): error TS7006: Parameter 'x' implicitly has an 'any' type. I do not see much difference. [1]: http://flowtype.org

You could always check out https://flowtype.org/

I wonder how long it will take before something like this gets implemented as a `Hyperterm` [0] plugin. I think it could be quite useful to combine `npm` packages with shell commands and `map`, `filter`, etc, in your terminal. The only thing I am unsure about are the underlying representations of the shell output. Arrays of arrays are not very semantic, so the code that parses them would not be very pleasant. Given a shape like: [ [ 'PID', 'TTY', 'TIME', 'CMD' ], [ '13750', 'pts/14', '00:00:00', 'bash' ], [ '25193', 'pts/14', '00:00:03', 'node' ], [ '25283', 'pts/14', '00:00:00', 'sh' ], [ '25284', 'pts/14', '00:00:00', 'ps' ] ] I would probably like to be able to apply some kind of transforms by default so that I can work with: [ { pid: '13750', tty: 'pts/14', time: '00:00:00', cmd: 'bash' }, { pid: '25193', tty: 'pts/14', time: '00:00:03', cmd: 'node' }, { pid: '25283', tty: 'pts/14', time: '00:00:00', cmd: 'sh' }, { pid: '25284', tty: 'pts/14', time: '00:00:00', cmd: 'ps' } ] Though if this was the case you would want some way of applying the right transform depending on the arguments passed into the command. I guess the bad thing is that there is currently presumably no way of using other shell features like pipes. Also, if you're going to start outputting different shaped data, then I think you should consider hooking this all up to `flowtype` [1] and creating type signatures to provide DX [2] [0]…

>Seems odd to deprecate their usage in React; why wouldn't you embrace a typically used construct in JavaScript? Because we already did embrace it, and we found that it was a mistake. I believe that the article addresses why mixins didn’t scale well in our React codebases. We have written a ton of React code and wanted to share our experience. It seems quite normal to me that our experience might not match experience of other JavaScript users. React offers a component model based on functional composition solution that was not quite common in JavaScript until very recently. Paradigms are much more fundamental than languages. We found that, with React’s paradigm, in our experience, mixins were unnecessary. For sure, your mileage may vary. >most of the issues mentioned exist everywhere with JavaScript because, well, it's a dynamic language You might not believe me, but these issues had much less of an impact on us with React’s component model. And even less so after we started using gradual static typing with Flow (http://flowtype.org/). >I would suspect many of the issues lie outside of using mixins and more of how everything is architected but without seeing their codebase I don't actually know that. I have been employed by Facebook for just a few months. I have written a few relatively complex React apps myself before. I didn’t see much of a difference between the mixins I wrote previously and mixins I saw at Facebook. In my view, both mixins I wrote and mixins I saw…