CS314 Software Engineering Responsive Clients Dave Matthews - - PDF document

▶

Dec 30, 2023 118 likes •163 views

9/12/18 CS314 Software Engineering Responsive Clients Dave Matthews Solution Technology Client Protocol Server ReactJS HTTP Java Spark Bootstrap JSON Gson ReactStrap TFFI JavaScript HTML CSS 1

SLIDE 1

9/12/18 1

CS314 Software Engineering Responsive Clients

Dave Matthews

Solution Technology

Client Protocol Server

ReactJS
Bootstrap
ReactStrap
JavaScript
HTML
CSS
HTTP
JSON
TFFI
Java Spark
Gson

SLIDE 2

9/12/18 2

JavaSpark

Web MicroServer
Static files
RESTful APIs

ReactStrap

Responsive mobile-first flexbox grid to build layouts

– twelve columns with five responsive tiers (xs, sm, md, lg, xl) – predefined classes using SASS variables and mixins

Bootstrap 4 Components (and more)

– buttons, button group – layout, card, collapse, modal, popovers – form, input group – list group, tables – navbar, navs

http://reactstrap.github.io

SLIDE 3

9/12/18 3

ReactJS

JavaScript (ECMAScript 6)

– declarative, not imperative

Component based system

– render() returns what to display based on properties – properties propagate state through component hierarchy – render() invoked when state changes

State

– must lift state to parent components

http://reactjs.org

Base Component Layout

SLIDE 4

9/12/18 4

Base Component Hierarchy Code Review - Application

index.html has viewport for responsive/mobile interface,

loads Bootstrap CSS and application (bundle.js)

client/src/entry.jsx creates a container containing App
client/src/comp../App.js adds Router, Header, Application,

Footer

client/src/comp../App../Application.js has top-level state,

gets configuration, adds Info and Options

client/src/comp../App../Info.js renders a static card
client/src/comp../App../Options.js renders/updates options