Flow Type vs RactiveJS

Overview

RactiveJS

Stacks19

Followers26

Votes21

GitHub Stars5.9K

Forks395

Flow (JS)

Stacks145

Followers75

Votes0

GitHub Stars22.2K

Forks1.9K

Flow (JS) vs RactiveJS: What are the differences?

Flow (JS): Flow is a static type checker for Javascript (by Facebook). Flow is a static type checker for Javascript created by Facebook; RactiveJS: Next-generation DOM manipulation. Ractive was originally created at theguardian.com to produce news applications. Ractive takes your Mustache templates and transforms them into a lightweight representation of the DOM – then when your data changes, it intelligently updates the real DOM.

Flow (JS) and RactiveJS are primarily classified as "Static Type Checkers" and "Templating Languages & Extensions" tools respectively.

Some of the features offered by Flow (JS) are:

Type Inference
Easy Integration
Realtime Feedback

On the other hand, RactiveJS provides the following key features:

Ractive.js is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.
Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins.
Some tools force you to learn a new vocabulary and structure your app in a particular way. Ractive works for you, not the other way around – and it plays well with other libraries.

Flow (JS) and RactiveJS are both open source tools. It seems that Flow (JS) with 19.7K GitHub stars and 1.68K forks on GitHub has more adoption than RactiveJS with 5.67K GitHub stars and 440 GitHub forks.

Instagram, Clubhouse, and Streamroot are some of the popular companies that use Flow (JS), whereas RactiveJS is used by Teleport, LeVego, and Record Bird. Flow (JS) has a broader approval, being mentioned in 35 company stacks & 18 developers stacks; compared to RactiveJS, which is listed in 5 company stacks and 8 developer stacks.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on RactiveJS, Flow (JS)

StackShare

Aug 13, 2019

Needs adviceon

TypeScript

CoffeeScript

JavaScript

From a StackShare community member: "We are looking to rewrite our outdated front-end with TypeScript. Right now we have a mix of CoffeeScript and vanilla JavaScript. I have read that adopting TypeScript can help enforce better code quality, and best practices. I also heard good things about Flow (JS). Which one would you recommend and why?"

405k views405k

Comments

Oleksandr

Senior Software Engineer at joyn

Oct 21, 2019

Decided

Initially making a decision to use Flow vs Typescript we decided to go with flow as we wanted our code to run in a way we wrote it, because when using Flow types are simply removed from the code without modifying the code itself. Sadly, the type system of Flow was in some cases very hard to understand and declare the types correctly, especially in cases when the structure is very dynamic (e.g. object keys and values are created dynamically). Another reason was bad integration with IDE and frequent crashes which made DX very poor. Therefore, we made another evaluation of Typescript and decided to move towards it. As our code base was pretty big when we decided to migrate to TS we couldn't just stop and re-write everything, that's why we started writing new modules in Typescript as well as transforming old components. To make that possible we had to configure Webpack loader to support simultaneous bundling of Flow&JS and Typescript. After around 2 months of the transformation we have around 40% of code being written in Typescript and we are more than happy with integration TS has with IDE, as well as ease of declaring types for dynamic modules and functions.

149k views149k

Comments

Vladyslav

Sr. Directory of Technology at Shelf

Oct 25, 2019

Decided

As our codebase grew in size, we were looking for ways to improve code quality. We chose TypeScript over Flow due to its rapid industry adoption and overall tools support.

We noticed how different open-source projects were migrating from Flow to TypeScript. Most notably, it was Jest, even though Jest and Flow were both developed by Facebook. See this HN thread if you want to dive into an interesting discussion around this move.

Additionally, at the beginning of 2019, both Babel and ESLint enabled seamless TypeScript support, which allowed easy migration path in a backward-compatible way.

155k views155k

Comments

Detailed Comparison

RactiveJS	Flow (JS)
Ractive was originally created at theguardian.com to produce news applications. Ractive takes your Mustache templates and transforms them into a lightweight representation of the DOM – then when your data changes, it intelligently updates the real DOM.	Flow is a static type checker for Javascript created by Facebook.
Ractive.js is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.;Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins.;Some tools force you to learn a new vocabulary and structure your app in a particular way. Ractive works for you, not the other way around – and it plays well with other libraries.	Type Inference; Easy Integration; Realtime Feedback
Statistics
GitHub Stars 5.9K	GitHub Stars 22.2K
GitHub Forks 395	GitHub Forks 1.9K
Stacks 19	Stacks 145
Followers 26	Followers 75
Votes 21	Votes 0
Pros & Cons
Pros 8 Lightweight 5 Virtual Dom 4 Easy one page app templating of data 2 Components 2 Data-binding	No community feedback yet
Integrations
Mustache Node.js	No integrations available

What are some alternatives to RactiveJS, Flow (JS)?

CoffeeScript

It adds syntactic sugar inspired by Ruby, Python and Haskell in an effort to enhance JavaScript's brevity and readability. Specific additional features include list comprehension and de-structuring assignment.

TypeScript

TypeScript is a language for application-scale JavaScript development. It's a typed superset of JavaScript that compiles to plain JavaScript.

Pug

This project was formerly known as "Jade." Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Handlebars.js

Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.

Mustache

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

Slim Lang

Slim is a template language whose goal is to reduce the view syntax to the essential parts without becoming cryptic. It started as an exercise to see how much could be removed from a standard html template (<, >, closing tags, etc...). As more people took an interest in Slim, the functionality grew and so did the flexibility of the syntax.

EJS

It is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

Jinja

It is a full featured template engine for Python. It has full unicode support, an optional integrated sandboxed execution environment, widely used and BSD licensed.

Twig

It is a modern template engine for PHP. It is flexible, fast, and secure. Its syntax originates from Jinja and Django templates.

Nunjucks

Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by jinja2. It supports all modern browsers.

Related Comparisons

Some of the features offered by Flow (JS) are:

Type Inference
Easy Integration
Realtime Feedback

On the other hand, RactiveJS provides the following key features:

Ractive.js is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.
Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins.
Some tools force you to learn a new vocabulary and structure your app in a particular way. Ractive works for you, not the other way around – and it plays well with other libraries.

Flow Type vs RactiveJS