Convert Figma logo to code with AI

facebook logoflow

Adds static typing to JavaScript to improve developer productivity and code quality.

22,079
1,851
22,079
1,020

Top Related Projects

100,112

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

48,780

The Kotlin Programming Language.

96,644

Empowering everyone to build reliable and efficient software.

122,720

The Go programming language

10,061

The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.

19,321

The Crystal Programming Language

Quick Overview

Flow is a static type checker for JavaScript developed by Facebook. It aims to find errors in JavaScript code without running it, using type inference to understand the code and detect inconsistencies. Flow can be integrated into various development environments and build systems to provide real-time feedback and improve code quality.

Pros

  • Improves code reliability by catching type-related errors early in development
  • Enhances code readability and maintainability through type annotations
  • Offers gradual typing, allowing developers to add types incrementally
  • Provides intelligent autocompletion in supported IDEs

Cons

  • Requires additional setup and configuration in projects
  • Can have a steep learning curve for developers new to static typing
  • May introduce some overhead in development time due to type annotations
  • Not as widely adopted as TypeScript, potentially limiting community support

Code Examples

  1. Basic type annotation:
// @flow
function square(n: number): number {
  return n * n;
}

console.log(square(4)); // 16
console.log(square("4")); // Error: string is incompatible with number
  1. Using Maybe types for optional values:
// @flow
function greet(name: ?string): string {
  if (name) {
    return `Hello, ${name}!`;
  }
  return "Hello, stranger!";
}

console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet(null)); // "Hello, stranger!"
  1. Working with React components:
// @flow
import React from 'react';

type Props = {
  name: string,
  age: number,
};

const UserProfile = ({ name, age }: Props) => (
  <div>
    <h1>{name}</h1>
    <p>Age: {age}</p>
  </div>
);

export default UserProfile;

Getting Started

To start using Flow in your project:

  1. Install Flow:
npm install --save-dev flow-bin
  1. Add a Flow configuration file:
touch .flowconfig
  1. Add Flow check script to package.json:
"scripts": {
  "flow": "flow"
}
  1. Run Flow:
npm run flow
  1. Add // @flow to the top of files you want to check with Flow.

Competitor Comparisons

100,112

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

Pros of TypeScript

  • Wider adoption and larger community support
  • Better tooling and IDE integration
  • More comprehensive documentation and learning resources

Cons of TypeScript

  • Steeper learning curve for beginners
  • Slightly more verbose syntax in some cases
  • Potentially longer compilation times for large projects

Code Comparison

TypeScript:

interface Person {
  name: string;
  age: number;
}

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

Flow:

// @flow
type Person = {
  name: string,
  age: number,
};

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

Both TypeScript and Flow aim to add static typing to JavaScript, but they have different approaches and ecosystems. TypeScript offers a more robust type system and better tooling support, while Flow provides a lighter-weight solution that may be easier to integrate into existing projects. The syntax differences are minimal, as shown in the code comparison. TypeScript's wider adoption often leads to better third-party library support and more community-driven resources. However, Flow's simplicity can be advantageous for smaller projects or teams looking for a less intrusive type-checking solution.

48,780

The Kotlin Programming Language.

Pros of Kotlin

  • Full-featured programming language with broader application scope
  • Strong interoperability with Java and Android ecosystem
  • More mature and widely adopted in industry

Cons of Kotlin

  • Steeper learning curve for developers new to JVM languages
  • Larger runtime overhead compared to Flow's static type checking

Code Comparison

Kotlin:

fun greet(name: String): String {
    return "Hello, $name!"
}

val result = greet("World")
println(result)

Flow:

// @flow
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const result = greet("World");
console.log(result);

Key Differences

  • Kotlin is a full programming language, while Flow is a static type checker for JavaScript
  • Kotlin compiles to JVM bytecode or JavaScript, Flow enhances JavaScript with type annotations
  • Kotlin offers more language features and constructs, Flow focuses on adding type safety to existing JavaScript code

Use Cases

  • Kotlin: Android app development, server-side applications, multiplatform projects
  • Flow: Adding type checking to large JavaScript codebases, improving code quality in existing JavaScript projects

Community and Ecosystem

  • Kotlin has a larger and more diverse ecosystem, with strong support from JetBrains and the Android community
  • Flow has a more focused community, primarily centered around Facebook and React developers
96,644

Empowering everyone to build reliable and efficient software.

Pros of Rust

  • Rust is a full-fledged programming language, offering more comprehensive features and capabilities than Flow
  • Provides memory safety without garbage collection, leading to better performance and lower resource usage
  • Has a growing ecosystem with a wide range of libraries and tools

Cons of Rust

  • Steeper learning curve due to its unique concepts like ownership and borrowing
  • Longer compilation times compared to Flow's type checking process
  • Less integrated with JavaScript ecosystems, making it potentially more challenging for web developers

Code Comparison

Rust:

fn main() {
    let x: i32 = 5;
    println!("The value of x is: {}", x);
}

Flow:

// @flow
function add(x: number, y: number): number {
    return x + y;
}

Summary

While Rust offers a more comprehensive programming experience with better performance and memory safety, Flow provides a simpler type-checking solution specifically for JavaScript. Rust's learning curve is steeper, but it offers more control and a wider range of applications. Flow, on the other hand, integrates more seamlessly with existing JavaScript projects and has a gentler learning curve for web developers already familiar with JavaScript.

122,720

The Go programming language

Pros of Go

  • Compiled language with excellent performance and low memory footprint
  • Built-in concurrency support with goroutines and channels
  • Comprehensive standard library and robust ecosystem

Cons of Go

  • Less flexible type system compared to Flow's gradual typing
  • Steeper learning curve for developers coming from dynamic languages
  • Lack of generics (prior to Go 1.18) made some abstractions challenging

Code Comparison

Flow:

function add(x: number, y: number): number {
  return x + y;
}

Go:

func add(x int, y int) int {
  return x + y
}

Summary

Go is a statically-typed, compiled language focused on simplicity and efficiency, while Flow is a static type checker for JavaScript. Go offers better performance and concurrency support, but Flow provides more flexibility with its gradual typing system. Go's syntax is more verbose but clearer, while Flow allows for more concise code within the JavaScript ecosystem. The choice between them depends on project requirements, team expertise, and performance needs.

10,061

The Dart SDK, including the VM, JS and Wasm compilers, analysis, core libraries, and more.

Pros of sdk

  • Complete language ecosystem with its own compiler, runtime, and core libraries
  • Supports both AOT and JIT compilation, offering flexibility for different use cases
  • Strong tooling support, including a powerful IDE (IntelliJ IDEA) with Dart plugin

Cons of sdk

  • Steeper learning curve due to being a full-fledged programming language
  • Less widespread adoption compared to JavaScript, potentially limiting community resources

Code Comparison

sdk (Dart):

void main() {
  String name = 'John';
  int age = 30;
  print('Hello, $name! You are $age years old.');
}

Flow:

// @flow
function greet(name: string, age: number): void {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

Key Differences

  • sdk is a complete programming language, while Flow is a static type checker for JavaScript
  • sdk offers more comprehensive tooling and ecosystem support
  • Flow integrates more seamlessly with existing JavaScript codebases
  • sdk requires learning a new language syntax, while Flow extends JavaScript

Use Cases

  • sdk: Developing cross-platform applications, especially with Flutter framework
  • Flow: Adding type checking to existing JavaScript projects without changing the runtime
19,321

The Crystal Programming Language

Pros of Crystal

  • Compiled language with static typing, offering better performance than JavaScript
  • Ruby-like syntax, making it easy for Ruby developers to transition
  • Built-in concurrency support with fibers

Cons of Crystal

  • Smaller ecosystem and community compared to JavaScript and Flow
  • Limited platform support (primarily Linux and macOS)
  • Longer compilation times compared to JavaScript's immediate execution

Code Comparison

Crystal:

def greet(name : String)
  puts "Hello, #{name}!"
end

greet("World")

Flow:

// @flow
function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("World");

Key Differences

  • Crystal is a compiled language, while Flow is a static type checker for JavaScript
  • Crystal has a Ruby-like syntax, whereas Flow uses JavaScript syntax with type annotations
  • Crystal offers native concurrency support, while Flow relies on JavaScript's asynchronous patterns
  • Flow integrates with existing JavaScript codebases, while Crystal requires a complete rewrite
  • Crystal's type system is built into the language, while Flow adds type checking on top of JavaScript

Both projects aim to improve code quality and catch errors early, but they take different approaches. Crystal offers a new language with built-in type safety, while Flow enhances existing JavaScript code with optional static typing.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Flow

CircleCI Follow @flowtype MIT License GitHub contributors GitHub top language Join Discord Chat

Flow is a static typechecker for JavaScript. To find out more about Flow, check out flow.org.

Contents

Requirements

Flow works with:

  • macOS (x86_64)
  • Linux (x86_64 and arm64)
  • Windows (x86_64, Windows 10 recommended)

There are binary distributions for each of these platforms and you can also build it from source on any of them as well.

Using Flow

Check out the installation instructions, and then the usage docs.

Using Flow's parser from JavaScript

While Flow is written in OCaml, its parser is available as a compiled-to-JavaScript module published to npm, named flow-parser. Most end users of Flow will not need to use this parser directly, but JavaScript packages which make use of parsing Flow-typed JavaScript can use this to generate Flow's syntax tree with annotated types attached.

Building Flow from source

Flow is written in OCaml (OCaml 5.2.0 is required).

  1. Install system dependencies:

    • Mac: brew install opam

    • Debian: sudo apt-get install opam

    • Other Linux: see opam docs

    • Windows: cygwin and a number of dependencies like make, gcc and g++ are required.

      One way to install everything is to install Chocolatey and then run .\scripts\windows\install_deps.ps1 and .\scripts\windows\install_opam.ps1. Otherwise, see the "Manual Installation" section of OCaml for Windows docs and install all of the packages listed in our install_deps.ps1.

      The remainder of these instructions should be run inside the Cygwin shell: C:\tools\cygwin\Cygwin. Then cd /cygdrive/c/Users/you/path/to/checkout.

  2. Validate the opam version is 2.x.x:

    opam --version
    

    The following instructions expect 2.x.x. Should your package manager have installed a 1.x.x version, please refer to the opam docs to install a newer version manually.

  3. Initialize opam:

    # on Mac and Linux:
    opam init
    
    # on Windows:
    scripts/windows/init_opam.sh
    
  4. Install Flow's OCaml dependencies:

    # from within this git checkout
    make deps
    

    note: If you find that you get an error looking for ocaml-base-compiler version, your local dependency repo may be out of date and you need to run opam update + opam upgrade

  5. Build the flow binary:

    eval $(opam env)
    make
    

    This produces the bin/flow binary.

  6. Build flow.js (optional):

    opam install -y js_of_ocaml.5.7.2
    make js
    

    This produces bin/flow.js.

    The Flow parser can also be compiled to JavaScript. Read how here.

Running the tests

To run the tests, first compile flow using make. Then run bash ./runtests.sh bin/flow

There is a make test target that compiles and runs tests.

To run a subset of the tests you can pass a second argument to the runtests.sh file.

For example: bash runtests.sh bin/flow class | grep -v 'SKIP'

Join the Flow community

License

Flow is MIT-licensed (LICENSE). The website and documentation are licensed under the Creative Commons Attribution 4.0 license (website/LICENSE-DOCUMENTATION).

NPM DownloadsLast 30 Days