TDDC73 Lecture 3 1 Agenda Questions Complex components - - PowerPoint PPT Presentation

▶
tddc73 lecture 3
SMART_READER_LITE
LIVE PREVIEW

TDDC73 Lecture 3 1 Agenda Questions Complex components - - PowerPoint PPT Presentation

Jun 20, 2023 277 likes •463 views

TDDC73 Lecture 3 1 Agenda Questions Complex components Network REST and/or GraphQL Screen navigation 2 Organisation of code Biggest challenge of UI development (Ok one of ) Maintaining the

slide-1
SLIDE 1

1

TDDC73 Lecture 3

slide-2
SLIDE 2

Agenda

  • Questions
  • Complex components
  • Network
  • REST and/or GraphQL
  • Screen navigation

2

slide-3
SLIDE 3

Organisation of code

  • Biggest challenge of UI development (Ok one of )
  • Maintaining the correct and same state between the UI and

the system/model/backend

  • Separation of concerns
  • Architecture Presentation Patterns
  • MVC
  • MVP
  • MVVM

3

slide-4
SLIDE 4

Model-View-Presenter MVP

4

slide-5
SLIDE 5

Demo

  • Android Adapter

5

slide-6
SLIDE 6

Network

  • REST

6

slide-7
SLIDE 7

DEMO old school

7

slide-8
SLIDE 8

Network

  • GraphQL
  • Putting REST to rest

8

slide-9
SLIDE 9

GraphQL

  • A query language for back-ends
  • Front-end driven
  • You decide what you want
  • Subway vs Pressbyrån
  • Singel endpoint
  • Typed

9

slide-10
SLIDE 10

Navigation

10

slide-11
SLIDE 11

Flutter

  • Routes
  • Pages/Screens
  • Navigation
  • To move between Routes
  • Push and Pop
  • Hero
  • Animation between Routes

11

slide-12
SLIDE 12

Routes

12

class FirstRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Route'), ), body: Center( child: RaisedButton( child: Text('Open route'), }, ), ), ); } } class SecondRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Route"), ), body: Center( child: RaisedButton(¨ child: Text('Go back!'), ), ), ); } }

slide-13
SLIDE 13

Navigation

13

child: RaisedButton(

  • nPressed: () {

Navigator.pop(context); }, child: Text('Go back!'), ), child: RaisedButton( child: Text('Open route'),

  • nPressed: () {

Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()), ); }, ), routes: { '/': (context) => FirstScreen(), '/info': (context) => SecondRoute(), }, Navigator.pushNamed(context, ‘/info');

slide-14
SLIDE 14

Hero

14

Hero( tag: 'imageHero', child: Image.network( 'https://picsum.photos/250?image=9', ), );

slide-15
SLIDE 15

React-Native

  • Screens
  • Routes describes Screens
  • Offers a few options
  • StackNaviagator (Similar to Flutter)

const MainNavigator = createStackNavigator({ Home: {screen: HomeScreen}, Profile: {screen: ProfileScreen}, });

15

slide-16
SLIDE 16

Screen (Just a component)

16

class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const {navigate} = this.props.navigation; return ( <Button title="Go to Anders's profile"

  • nPress={() => navigate('Profile', {name: ‘Anders'})}

/> ); } createStackNavigator( { Home: HomeScreen, Profile: DetailsScreen, }, { initialRouteName: 'Home', } );

slide-17
SLIDE 17

Push,navigate,Back

17

<Button title="Go to Details... again"

  • nPress={() => this.props.navigation.push('Details')}

/> <Button title="Go to Home"

  • nPress={() => this.props.navigation.navigate('Home')}

/> <Button title="Go back"

  • nPress={() => this.props.navigation.goBack()}

/>

slide-18
SLIDE 18

Standard Android

  • Basic
  • Activities
  • Fragments (deprecated)
  • Navigator (like flutter and react) in googles Architecture pattern/

solution

18