Frontend

Last updated 7 years ago

Frontend

After you defined the business functionality - expressed most clearly by the APIs of a domain - by creating your API mocks, you start building your UI.

Architectural Decisions

*TODO: Create ADR* I stick with React up to the point that the others are at least on the same functional level: Native and Frontend.

Development Process

Decide if you deploy the application serverless or use docker containers (vendor independent)

Technology Stack

Build Setup: ES6, webpack, babel, npm
Frontend Framework: React ( / ) - JSX, State, Life Cycle Methods
State Management: Redux + Redux Saga
Web/Desktop:
- React with Create-React-App
- CSS Framework - Bulma /
Web/Mobile:
- CSS Framework - Bulma
Native:
- React Native

Rapid Prototyping

To get feedback fast create a first prototype:

Define Application Structure (Paper? + Photo or Balsamiq + screenshot from rolemodels):

Build a mock?

Build an app with component based development

Create sampleapp-client

create-react-app sampleapp-client
cd sampleapp-client

Setup Project Structure

src
 ├── components
 │
 ├── containers
 │  ├── auth.js
 │  ├── productList.js
 │  └── productDetail.js
 │
 ├── reducers (aka ducks)
 │  ├── index.js (combineReducers + complex selectors)
 │  ├── auth.js (reducers, action types, actions creators, selectors)
 │  └── product.js (reducers, action types, actions creators, selectors)
 │
 ├── sagas
 │  ├── index.js (root saga/table of content of all the sagas)
 │  ├── auth.js
 │  └── product.js
 │
 └── services
    ├── authenticationService.js
    └── productsApi.js

Create Router and setup basic Application structure

Install: npm i react-router-dom

Create Placeholder Components/Containers:

Setup CSS Framework for Styling

Install storybook.js and configure it

npm i --save-dev @storybook/react

Further Setup:

Create Container/Componente LoginPage (might be a container in the future):

/src/container/LoginPage

in its own folder in this folder you then find the LoginPage.js file, .css , pictures (.svg) and the story LoginPage-story.js

Example how IBM is doing it:

Developer Components in Stylebook:

Run Storybook: npm run storybook

Using ReactRouter with history:
- use withRouter on at least App and otherwise use a manual history object
Frontend Tracking with Google Analytics:

Make AJAX / REST Calls from the Frontend with axios

Dockerize a React App

Deploy the Frontend

Upload the assets of our app
Use a CDN to serve out our assets
Point our domain to the CDN distribution
Switch to HTTPS with a SSL certificate

Create the Bucket

Select Create Bucketand pick a name for your application and select the US East (N. Virginia) Region Region. Since our application is being served out using a CDN, the region should not matter to us.

Now click on your newly created bucket from the list and navigate to its permissions panel by clicking Permissions.

{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
        "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::developerportal-client/*"]
    }
  ]
}

Now select Use this bucket to host a website and add ourindex.htmlas the Index Document and the Error Document. Since we are letting React handle 404s, we can simply redirect our errors to ourindex.htmlas well. Hit Save once you are done.

This panel also shows us where our app will be accessible. AWS assigns us a URL for our static website. In this case the URL assigned to me is http://developerportal-client.s3-website.eu-central-1.amazonaws.com.

Build Our App

Create React App comes with a convenient way to package and prepare our app for deployment. From our working directory simply run the following command.

npm run build

This packages all of our assets and places them in thebuild/directory.

Upload to S3

Now to deploy simply run the following command; whereYOUR_S3_DEPLOY_BUCKET_NAMEis the name of the S3 Bucket we created before.

aws s3 sync build/ s3://YOUR_S3_DEPLOY_BUCKET_NAME 
// aws s3 sync build/ s3://developerportal-client

Code Quality & Testing

unit testing framework
component based testing frameworks

how to build this into the build pipeline?

Micro-Frontends How to integrate multiple Frontends into one (token in local storage?)?

Code splitting to multiple pages in react:
single-spa:

Design:

PreviousTesting NextServerless

Last updated 7 years ago