CS314 Software Engineering Responsive Clients Dave Matthews - - PDF document

cs314 software engineering responsive clients
SMART_READER_LITE
LIVE PREVIEW

CS314 Software Engineering Responsive Clients Dave Matthews - - PDF document

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
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
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
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
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