Connector Component
A Connector
component is a low level component which is used to connect a screen
or view
or page
to the progress of the route being sent from navigating to that particular page. It works similarly to npmJs
or youtube's
way of connecting a page to the information of the route from the request being made by a previous page. This low level component does not work on mobile i.e react-native
or any other Javascript based mobile native library except hybrid based i.e Cordova
. This component is quite useful when you are building a web app that requires a screen
to download some contents before pushing the user to the next route.
Lets consider this short illustration, Let's consider two pages Page A
and Page B
, when a button in Page A
is clicked, it needs to make a request to prefetch some queries from an online Api before navigating to Page B
. Also it needs to display a loading progress bar at the top of the page while making this navigation. Ideally, we would want to initialize an handshake between Page A
and Page B
which would allow Page A
to specify that it wants to navigate to Page B
, then give Page B
the functionality to show a progress bar after the handshake and navigation.
Therefore, to implement this successfully, we would need 2 major components. The Router
which we would use in initializing the request, show some progress and downloading the contents , and the Connector
which we would use in connecting Page B
to the route progress from the initialized requests. Luckily, react-kunyora
provides us with this two components, however we would be looking into the Connector
component in this section and the Router
component in a later section.
The Connector
component is built using the render prop
idealogy and provides a functionliaty which allows it to be code splitted
or not. It can also be looked at as a top level component since ideally, you would want to code split majority of your components from the route
level. Therefore in this section, we would be building a very simple example centered on using this component.
Techniques used in Code Splitting
Code splitting can be basically done in two ways:
Code splitting from the route level : This can be seen as a top level code splitting technique because it encapsulates the page or a particular route itself. This means that when a route is required by the browser, all the UI needed to build the screen are loaded on demand. This way, we can conceptually break all our pages into smaller chunks based on the route and load the data we need on demand. We would show an example of this in our exmaple which we would present soon.
Code splitting from the component level : This can be seen as a lower level code splitting technique because we conceptually code split our component within the page. This means that if we had a
view
containing aneditor
, atool-tip
and analert-box
. We would conceptually code split thealert-box
within that same component since we do not need it loaded on initial mount and would only require to make it visible when the user performs an action such as clicking on a button to trigger its visibility. However, one needs to be very tactical when performing this pattern of code splitting because the component required would be downloaded over a network.
Developing an invoice generating application
In this section of the documentation, we would be creating a simple report based system. The application would ask a user to enter some details into an html form, then we will use the supplied information to generate a basic invoice.
Let's develop the component in our application that would be used in collecting the user inputs.
/**
* Index.js
**/
import React from 'react';
import {render} from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import {Connector} from 'react-kunyora';
export default class App extends React.PureComponent {
state = {
isInvoiceVisible: false,
name: '',
paying: 0,
};
render() {
let {name, paying, isInvoiceVisible} = this.state;
return (
<center>
<input
type="text"
value={name}
onChange={(evt) => this.setState({name: evt.target.value})}
/>
<br />
<input
type="number"
value={paying}
onChange={(evt) => this.setState({paying: evt.target.value})}
/>
<br />
<button onClick={() => this.setState({isInvoiceVisible: true})}>
Generate Report
</button>
<br />
<p style={{marginTop: 20}}>
{isInvoiceVisible && (
<Connector
name="invoice"
loadingComponent={<span>Generating</span>}
errorComponent={null}
loader={() => import('./Invoice')}>
{(Invoice) => <Invoice {...this.state} />}
</Connector>
)}
</p>
</center>
);
}
}
render(<App />, document.getElementById('root'));
registerServiceWorker();
The above code simply creates a simple component which collects the name and the amount a user would be paying and feeds it to the Invoice
component which would be dynamically loaded by the Connector
when the generate invoice
button is clicked. Also we see its quite easy to create a Connector
, all we do is to supply the name
prop for our Connector
which is compulsory and can be anything, then we supply a loadingComponent
prop which our Connector
uses in displaying a loading
notification when the component
is being downloaded. Also we use a loader
component which our component uses to dynamically import the new component.
Lets go ahead to finish the creation of our invoice by creating the Report
component.
/**
* Invoice.js
*/
import React from 'react';
const Invoice = (props) => {
let balance = 10000 - Number(props.paying);
return (
<div>
<span>Name: {props.name}</span>
<span>Amount Paid: {props.paying} </span>
<span> Goods Bought: Spare Parts </span>
<span>Balance: {balance > 0 ? balance : 0} </span>
</div>
);
};
export default Invoice;
The above code just creates a simple Invoice. Run your application. Please check the Connector Api reference