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

9/12/18 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 2

9/12/18 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 3

9/12/18 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 4