Overview

React

Stacks178.2K

Followers147.0K

Votes4.1K

GitHub Stars240.3K

Forks49.7K

PureScript

Stacks88

Followers86

Votes18

GitHub Stars8.8K

Forks569

PureScript vs React: What are the differences?

Introduction

PureScript and React are both popular technologies used in web development. However, they have key differences in terms of their approach, architecture, and language. In this article, I will outline six key differences between PureScript and React.

Language Paradigm: PureScript is a statically-typed functional programming language, whereas React is a JavaScript library for building user interfaces. PureScript follows a purely functional programming paradigm and encourages immutability and functional composition. On the other hand, React can be used with both functional and object-oriented programming styles.
Type System: PureScript has a more advanced and expressive type system compared to React. It features type inference, higher kinded types, type classes, and row types. This enables developers to catch errors at compile-time and write more robust code. React, being primarily a JavaScript library, relies on the type system provided by JavaScript, which is less powerful and lacks many advanced features.
State Management: PureScript provides various libraries and approaches for state management, including functional reactive programming (FRP) libraries like purescript-aff, purescript-signal, and purescript-behaviors. These libraries allow for declarative and composable state management. In contrast, React does not offer built-in state management solutions and requires the use of third-party libraries like Redux or MobX.
Component Model: React follows a component-based architecture, where UI is broken down into reusable components that encapsulate their own state and behavior. These components are built using JavaScript and JSX (a syntax extension for JavaScript). PureScript, being its own programming language, has its own component model built around the React-like purescript-react library. The component model in PureScript encourages a functional programming approach and emphasizes immutability and composition.
Learning Curve: PureScript can have a steeper learning curve compared to React. This is largely due to its functional programming nature, advanced type system, and the need to familiarize oneself with the PureScript ecosystem. React, on the other hand, has a larger community and extensive documentation, making it more beginner-friendly and accessible to developers with a JavaScript background.
Tooling and Ecosystem: React has a vast and mature ecosystem with numerous libraries, tools, and frameworks available, making it easier to find solutions and integrate with other technologies. PureScript, being a less widely adopted language, has a smaller ecosystem with fewer libraries and tools. However, it still has a vibrant community and growing set of libraries for web development.

In summary, PureScript and React differ in terms of programming paradigm, type system, state management, component model, learning curve, and ecosystem. PureScript emphasizes functional programming, offers a powerful type system, and provides built-in state management solutions. React, on the other hand, is a JavaScript library, supports both functional and object-oriented programming, and relies on external state management libraries.

Advice on React, PureScript

Cyrus

Aug 15, 2019

Needs adviceon

Vue.js

React

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

883k views883k

Comments

Cyrus

Aug 15, 2019

Needs advice

Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.

For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.

How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...

401k views401k

Comments

Malek

Web developer at Quicktext

Mar 28, 2020

Decided

The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!

What do you think?

244k views244k

Comments

Detailed Comparison

React	PureScript
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.	A small strongly typed programming language with expressive types that compiles to JavaScript, written in and inspired by Haskell.
Declarative; Component-based; Learn once, write anywhere	-
Statistics
GitHub Stars 240.3K	GitHub Stars 8.8K
GitHub Forks 49.7K	GitHub Forks 569
Stacks 178.2K	Stacks 88
Followers 147.0K	Followers 86
Votes 4.1K	Votes 18
Pros & Cons
Pros 837 Components 673 Virtual dom 579 Performance 509 Simplicity 442 Composable Cons 41 Requires discipline to keep architecture organized 30 No predefined way to structure your app 29 Need to be familiar with lots of third party packages 13 JSX 10 Not enterprise friendly	Pros 6 Purely functional 4 Great FFI to JavaScript 2 Alternate backends 2 The best type system 1 Pursuit Cons 1 Have Some Bugs 1 No JSX/Template 1 Not so fancy error reporting

What are some alternatives to React, PureScript?

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

Meteor

A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets.

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

Bower

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

Elm

Writing HTML apps is super easy with elm-lang/html. Not only does it render extremely fast, it also quietly guides you towards well-architected code.

Julia

Julia is a high-level, high-performance dynamic programming language for technical computing, with syntax that is familiar to users of other technical computing environments. It provides a sophisticated compiler, distributed parallel execution, numerical accuracy, and an extensive mathematical function library.

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.