React on λambda

Without special ceremonies, we will start giving out bream and shouting about functionalism, by the way, hello everyone!

With the development of the reactor smoothly gets rid of OOP-shnoy impurities and more and more closer to functional programming. At the beginning, there appeared higher order components (HOC) instead of mixins, then stateless components almost replaced classes, and here is the last spurt, hooks rolled out, which completely rid the reactor of classes.

I don’t know where the next branch of development will lead, but I can confidently say, it’s time to get rid of JSX, and in favor of those very functions. Be with us Sergey Druzhko, we would have heard:

- A strong statement, I certainly will not check it .

But I invite you to check it out, or rather estimate what a reaction without JSX can be.

Kingdom of patterns

In the world of templates, everything revolves around his majesty of the text, you plunge into it to the ears and start dirty business, namely, insert the code, indicating where you need to repeat, and where to show or hide something. And to mark the border between the text and the code, antennae (curly brackets), tags or some other directives are used.

Unlike template engines, in JSX, the transition from code to HTML occurs automatically without markup, and these transitions can be repeated recursively. That is why you can hear criticism in the direction of JSX, saying that you encode JS inside HTML, and inside that JS another nested HTML, etc.

Well, for the rest, JSX is the same template engine, and all because XHP had its influence on the reactor, in fact it was tweaked by PHP. If the reactor in its pure form is small, which has something in common with XHP, then JSX is its twin brother, but only in the JavaScript world.

There is nothing wrong with template engines; on the contrary, it is a very convenient tool for working with text. However, for component development, functions are the most appropriate tool. A natural question may appear here: how can functions simplify the work on text?

After all, now you get HTML + CSS from a coder / designer, quickly put in mustaches or directives and ala component is ready, or even look at the whole page. Yes, of course there Vue / Angular type frameworks are taxiing out and our reactor was crying softly to the side. Unfortunately, in practice, I have never met a designer who provided HTML + CSS, and the designer was a mythical character that no one has ever met in life, and in the life of many companies even designers on staff are fictional creatures, and all this work does , right - frontend. That is why often in the requirements for a job we find something like this:

- Experience on Bootstrap eighth version for at least 10 years.

If this is your case, then there is no difference there: typeset HTML with a mustache at the beginning or immediately bangat the component on pure functions. Although of course, there is a difference with the functions will have less to knock on the keys.
')

Kingdom function

Most likely you already guess that in this world his majesty will be ruled by function, and everything will be functions, now components are functions, tags are also functions, in this kingdom discrimination will touch even variables, and again in favor of functions. Total racism

However, in this world, not all functions are equal, there are the usual functions of mongrels, and there are grandees - curried functions , apparently Sir Curry Haskell himself bestowed this title on them.

Further in the examples, I will use the react-on-lambda library from a certain author - me, but nothing prevents you from creating your own bike.

OK, let's look at these nobles:

import λ from 'react-on-lambda' const postLink = λ.a({href: `/posts/123`}) 

At first glance, the usual function, but there is a characteristic feature, postLink is not yet an HTML element or even a reacting element, but a function into which you can stuff props and it will always return a function until we pass it a child element in the form: numbers, another lambda function, or an empty value, and then the magic will happen, the reaction element will return, which will eventually be converted to HTML.

For example:

 postLink(`Read more`) // JSX equivalent <a href=”/posts/123”>Read more</a> 

Oh yes, you could be confused by the Greek letter: simply ignore λ , you can replace it with any other identifier, for example:

 import l from 'react-on-lambda' // or import {div, h1} from 'react-on-lambda' 

I think these quirks are not found for the first time in js, for us already as native $ _ characters, it would seem that there is a connection with bucks and liby for DOM manipulation. And I liked the lambda, as it echoes the name of the lib itself.

And so in the course of program execution, the properties of elements / components can be collected from different pieces, without resorting to global variables, and most importantly, you can build point-free compositions:

 const title = λ.compose( λ.h1({className: `post-title`}), postLink ) const post = λ.div( title(`How to use react on lambda?`), λ.p(` Lorem ipsum dolor sit amet, Ernestina Urbanski consectetur adipiscing elit. Ut blandit viverra diam luctus luctus... `), postLink(`Read more`) ) render( post, document.getElementById(`app`) ) 

Using the composition, we created a new title function, which consists of two other functions, h1 and postLink . By passing the value in the title we get a clickable title with the text: "How do you use react on lambda?". In composition, the result from one function is transferred to another, with the data stream going from bottom to top.

Thanks to this chip, the functions in the composition are placed without nesting. Recall callbacks before Promise and async / await appeared , how they strained, and how they weren’t called them: spaghetti code, callback hell, pyramid of doom, christmas tree from hell, but multi-storey nesting in HTML for some reason doesn’t bother anyone.

Then we once again applied postLink , but with a different parameter, so we used the function more than once. Of course, this can be done with JSX, wrapping it in a function, but then we come to the main question, or can we just use only functions instead of JSX?

Kingdom React on λambda

Rather, it is not a kingdom, but a small county in the kingdom of functions. I suggest to get acquainted with React on lambda more closely:

The main features of the library:

• the output is the size of the bundle is less , right up to 20% compared to a similar project written in JSX;
• no transpiler (babel) or separate webpack settings are required, it works directly in the browser;
• smooth integration into the existing project with JSX.

For more detailed information I suggest to look at the demo projects:

• rol-table
• rol-todos

RoL Creationism

To create a reactor element is enough to dial:

 import λ, {div} from 'react-on-lambda' div({class: `sample`}, `Hello world!`) // you can use class instead className // JSX equivalent <div className=”sample”>Hello world!</div> 

Properties can overlap:

 const span = λ.span({class: `large`}) // -> function span({class: `small`}, `Sorry we changed our mind`) // JSX equivalent <span className="small">Sorry we changed our mind</span> 

It is enough to wrap λ existing components to get the function and all the bunches of the OP from them.

 λ(Provider, {store}, app) // JSX equivalent <Provider store={store}><App/></Provider> 

All child lambda functions will be called automatically by the parent element:

 λ.div( λ.div({class: `followers`}), λ.br ) 

That is, it is not necessary to call them:

 λ.div( λ.div({class: `followers`})(), λ.br() )() 

This was done for convenience and ease of integration with other libraries, such as redux.

And then I will briefly introduce you to other support functions. I want to remind you that all subjects from react-on-lambda are curried functions.

λ.mapKey

The mapKey function is used to iterate over arrays.

 const pages = [`Home page`, `Portfolio`, `About`] λ.ul( λ.mapKey(λ.li, pages) ) // JSX equivalent <ul> {pages.map((item, key) => <li key={key}> {item} </li> )} </ul> 

Key insertion (key) will be automatic and will be equal to the index of the element from the array. Automatic key insertion will be only if the key has not been transferred.

λ.mapProps

Function to transform object properties. Quite a controversial feature, it can be obtained from other third-party libraries, but I decided to leave it.

 const data = [ {id: 123, name: `Albert`, surname: `Einstein`}, {id: 124, name: `Daimaou `, surname: `Kosaka`}, ] const userList = λ.compose( λ.div({class: `followers`}), λ.ul, λ.mapKey(λ.li), λ.mapProps({key: `id`, children: `name`}) ) userList(data) // JSX equivalent const UserList = props => ( <div className="followers"> <ul> {props.data.map(user => <li key={user.id}> {user.name} </li> )} </ul> </div> ) <UserList data={data}/> 

λ.log

Debugging feature:

 const userList = λ.compose( λ.div, λ.ul, λ.log(`after mapping`), // -> will log piping value λ.mapKey(λ.li) ) 

Styling components

For lovers of styled-components , there is a built-in wrapper that returns a stylized component as a function:

 import λ from 'react-on-lambda' const header = λ.h1` color: #ff813f; font-size: 22px; ` const onClick = () => alert(`Hi!`) const app = λ.div( header(`Welcome to React on λamda!`), λ.button({onClick}, `OK`) ) 

I intend not to stuff the library with other functionality, since a lot of chips can be obtained from libraries: ramda , rambda , lodash / fp .

Well, that's all, I will be glad to your feedback.

Take care of yourself, may the saint functor be with you!