This is a very brief introduction to what are the things required to develop a modern front-end application or SPA (Single Page Application) with React and a backend server with Swift, more specifically Perfect Framework.

As we separate the front-end and back-end and because front-end uses just the backend APIs then you can use Vapor or Kitura as you like. I use Perfect as an example here!

Front-end

A React & Redux app that uses sagas to consume a set of apis provided by a Perfect Server.

There are many options/boilerplates to start with if you do not like to start from scratch, Facebook’s create-react-app is the most popular one:

facebook/create-react-app

If you do not like Facebook 😃 or if you are looking for something a little more opinionated then react-boilerplate is your friend:

react-boilerplate/react-boilerplate

Did you know that React is developed by Facebook? So you need to somehow like Facebook or maybe not because React is an open-source MIT licensed project 😛

Front-end artifacts

You may think that JavaScript ecosystem is so overwhelming and there are too many frameworks/libraries/dependencies that a front-end developer needs to deal with. That’s right, do not try to learn or use everything at the same time. I have a list for you that you can start with 😊:

React

React is a UI library to develop modern web applications. It is a very light-weight and performant library that provides a Virtual DOM. Do not worry about the Virtual DOM, just keep in mind that React changes/renders/syncs only the part that needs to be changed instead of reloading the whole document object model, this process is called reconciliation. React is fast because it’s smart! You can read more about the Virtual DOM here:

Virtual DOM and Internals - React

Also, you may have heard that React is not a framework and it is only a front-end library! Your Angular developer friend said that to you, doesn’t she?! OK, that’s right, if we do not consider React Friends!. Actually only 2 imports are sufficient to create a React app 😮

• React and
• ReactDOM

These are only UI related and most of the time we need more than just UI so React has its friends to help us! Let’s start with the React’s essentials at the moment then we will check friends:

Components (Presentational)

React.Component is a pure function!

Containers

mostly stateful components. You can check the differences between components and containers here:

Presentational and Container Components

Props

read-only properties of a component

Component state and lifecycle methods

Similar to iOS and Android ViewController/Activity lifecycle methods. For instance,componentDidMount and componentWillUnmount.

JSX

It looks a little odd at the beginning but you get used to it by the time. It is like writing html as JavaScript inside the render method of a component.

That’s pretty much it 😏. Check out this component example from React web site:

State and Lifecycle - React

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

You can also try it on CodePen here:

React Friends

Friends, we need these friends to be able to create a fully functional web application that can connect to a back-end. 😎

Redux

Unidirectional flow — A great architecture that simplifies the sate management and many other things!

Read Me

React-Router

Routing mechanism

React Router: Declarative Routing for React

Redux Saga

To call our back-end apis

Read Me · Redux-Saga

Styled Components

React/JavaScript based styling that replaces CSS

styled-components

Back-end

A Server Side Swift framework that provides the following:

Local Authentication (with your selected DB flavour)

• Session
• Login
• Registration
• Reset Pass…

For instance:

PerfectlySoft/Perfect-LocalAuthentication-MySQL

JSON APIs or web sockets according to your needs

For instance, PerfectHTTPServer to develop REST APIs

PerfectlySoft/Perfect-HTTPServer

or PerfectWebSockets to develop web sockets

PerfectlySoft/Perfect-WebSockets

DBMS

Any DBMS or RDBMS of your choice

ORM

An object relational mapping for Server Side Swift. For instance, PerfectCRUD:

PerfectlySoft/Perfect-CRUD

Or StORM:

StORM - Swift ORM

Benefits

Separation of concerns

Separating the concerns between the front-end and back-end. Separate teams can work on front-end and back-end projects .

Reusability

Needless to say that anything we develop in the back-end can be used in any mobile APP or Web APP.

Also, any component that we develop in React can be easily used in a different web app

Security

Front-end doesn’t deal with lots of security intensive issues because back-end takes care of them.

Code security

• Compiled backend code to be deployed so the code of the back-end will not be present on the server
• Built Front-end so the code consists of just chunks that are minified and uglified

Deployment

• Front-end is just a static web content with only one html and a set of chunks so we can easily deploy it anywhere we want
• Back-end can be easily deployed with Perfect Assistant (PA) that provides docker containers with binary and config files only!

Bottomline

Marriage between React and Perfect may produce lots of high quality/reusable/scalable web applications! 🎉🎉🎉