CS314 Software Engineering Web Development Dave Matthews Web - - PDF document

9/12/18 1

CS314 Software Engineering Web Development

Dave Matthews

Web application evolution

• Static server pages
• Active server pages
• Mobile server pages
• Single page applications

9/12/18 2

Static server pages Active server pages

9/12/18 3

Mobile Single page application

9/12/18 4

User Experience Best Practices

• Know your users
• Your users are not like you >>>>>>>>
• All users are not the same
• Let the user take control
• Content over chrome
• Don’t drown the user in data
• Innovate with intention
• Consistency across application
• Tells a story and use metaphors
• There are no user errors
• Consider the entire user experience

https://grommet.github.io/docs/best-practices

7 ISTJ

11-14%

5 ISFJ

9-14%

10

INFJ

1-3%

13

INTJ

2-4%

ISTP

4-6%

3

ISFP

5-9%

14

INFP

4-5%

11

INTP

3-5%

ESTP

4-5%

ESFP

4-9%

7

ENFP

6-8%

2

ENTP

2-5%

3

ESTJ

8-12%

4

ESFJ

9-13%

4

ENFJ

2-5%

1

ENTJ

2-5%

15 7 14 48

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

9/12/18 5

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
• Bootstrap
• ReactStrap
• JavaScript
• HTML
• CSS
• HTTP
• JSON
• TFFI
• Java Spark
• Gson

9/12/18 6

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

9/12/18 7

JavaSpark

• Web MicroServer
• Static files
• RESTful APIs