CS314 Software Engineering Web Development Dave Matthews Web - PDF document

9/12/18 CS314 Software Engineering Web Development Dave Matthews Web application evolution • Static server pages • Active server pages • Mobile server pages • Single page applications 1

9/12/18 Static server pages Active server pages 2

9/12/18 Mobile Single page application 3

9/12/18 User Experience Best Practices 7 5 10 13 • Know your users ISTJ ISFJ INFJ INTJ • Your users are not like you >>>>>>>> 11-14% 9-14% 1-3% 2-4% 15 48 • All users are not the same 0 3 14 11 • Let the user take control ISTP ISFP INFP INTP • Content over chrome 4-6% 5-9% 4-5% 3-5% • Don’t drown the user in data 0 0 7 2 • Innovate with intention ESTP ESFP ENFP ENTP • Consistency across application 4-5% 4-9% 6-8% 2-5% 7 14 • Tells a story and use metaphors 3 4 4 1 • There are no user errors ESTJ ESFJ ENFJ ENTJ 8-12% 9-13% 2-5% 2-5% • Consider the entire user experience https://grommet.github.io/docs/best-practices Mobile User Experience • Consider new use cases • Think mobile first • Desktop is not a mobile • Selection preferred to controls • New device sizes • Appropriately sized tap targets • New device capabilities • Gestures • No hover https://grommet.github.io/docs/mobile 4

9/12/18 Web Content Accessibility Guidelines • Content for people with disabilities – blindness and low vision – deafness and hearing loss – learning disabilities – cognitive limitations – limited movement – speech disabilities – photosensitivity https://www.w3.org/TR/WCAG20/ Solution Technology Client Protocol Server • ReactJS • HTTP • Java Spark • Bootstrap • JSON • Gson • ReactStrap • TFFI • JavaScript • HTML • CSS 5

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

9/12/18 JavaSpark • Web MicroServer • Static files • RESTful APIs 7