Frontend

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

  1. I use a basic css framework Bulma, because more powerful frameworks cost to much time understanding without understanding the basics.

  2. *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

  1. Design and Develop API Mock

  2. Understand the tech stack

  3. Rapid Prototyping

  4. Build an app with component based development

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

    1. Dockerize a react application

Technology Stack

  • Build Setup: ES6, webpack, babel, npm

  • Frontend Framework: React (ecosystem overview / course) - JSX, State, Life Cycle Methods

  • State Management: Redux + Redux Saga

  • Web/Desktop:

    • React with Create-React-App

    • CSS Framework - Bulma / blueprintjs

  • 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):

  1. LandingPage (login or not)2. Personal Service Page (only logged in)

Build a mock?

Build an app with component based development

Create sampleapp-client

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

Setup Project Structure

Theory: https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5

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

Code on github

Create Router and setup basic Application structure

Link: https://github.com/ReactTraining/react-router / https://reacttraining.com/react-router/web/guides/quick-start

Install: npm i react-router-dom

Setup Routers: Code on github

Create Placeholder Components/Containers:

Code on github

Setup CSS Framework for Styling

I currently use Bulma / BulmaThemes and FontAwesome:

Include link to css in index.html or use npm (recomended)

Code on github

Install storybook.js and configure it

Basic Setup: https://storybook.js.org/basics/guide-react/

npm i --save-dev @storybook/react

Configure Storybook [Code]

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:

Sample: https://github.com/kadira-samples/react-storybook-demo/blob/master/components/stories/MainSection.js

Code on github

Run Storybook: npm run storybook

Make AJAX / REST Calls from the Frontend with axios

https://medium.com/codingthesmartway-com-blog/getting-started-with-axios-166cb0035237

Dockerize a React App

  1. http://mherman.org/blog/2017/12/07/dockerizing-a-react-app/

  2. https://www.peterbe.com/plog/how-to-create-react-app-with-docker

Deploy the Frontend

  1. Upload the assets of our app

  2. Use a CDN to serve out our assets

  3. Point our domain to the CDN distribution

  4. Switch to HTTPS with a SSL certificate

AWS provides quite a few services that can help us do the above. We are going to useS3 to host our assets,CloudFront to serve it, Route 53to manage our domain, and Certificate Manager to handle our SSL certificate.

Create the Bucket

First, log in to yourAWS Consoleand select S3 from the list of services.

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

All this command does is that it syncs thebuild/directory with our bucket on S3. Just as a sanity check, go into the S3 section in your AWS Console and check if your bucket has the files we just uploaded.

Code Quality & Testing

how to build this into the build pipeline?

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

https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

Design:

PreviousTestingNextServerless

Last updated