Charla que pone frente por frente a los 3 cross platform. Xamarin, Flutter y React Native

1. Barcelona

13. Tecnología
Ide
Entorno visual
Integración de API
¿Quien está detrás?
¿Que hay por dentro?
Hot reload
Datos
Arquitectura
Plataformas
Ejemplos de código

14. Tecnologia
IDE
Quien está detrás

18. Integración API

28. Hot Reload

33. Datos

37. ¿Qué hay por dentro?

41. Arquitectura

45. Plataformas

49. Cargar HTTP

50. public async Task<List<TodoItem>> RefreshDataAsync ()
{
...
var uri = new Uri (string.Format (Constants.TodoItemsUrl, string.Empty));
...
var response = await _client.GetAsync (uri);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync ();
Items = JsonConvert.DeserializeObject <List<TodoItem>> (content);
}
...
}

51. Future<http.Response> fetchPost() {
return http.get('https://jsonplaceholder.typicode.com/posts/1');
}

52. async componentDidMount() {
//Have a try and catch block for catching errors.
try {
//Assign the promise unresolved first then get the data using the json method.
const pokemonApiCall = await fetch('https://pokeapi.co/api/v2/pokemon/');
const pokemon = await pokemonApiCall.json();
this.setState({pokeList: pokemon.results, loading: false});
} catch(err) {
console.log("Error fetching data-----------", err);

53. Crear un listado

54. <ListView x:Name="listView"
ItemTapped="OnItemTapped"
ItemsSource="{Binding .}" />

55. ListTile(
leading: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Container(
width: 48,
height: 48,
padding: EdgeInsets.symmetric(vertical: 4.0),
alignment: Alignment.center,
child: CircleAvatar(),
),
),
title: Text('title'),
dense: false,
),

56. render() {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
]}
renderItem={({item}) => <Text
style={styles.item}>{item.key}</Text>}
/>
</View>
);

57. Referencias

58. https://towardsdatascience.com/flutter-vs-react-native-vs-
xamarin-which-is-the-best-choice-for-2019-2bc30fc76442
https://docs.microsoft.com/en-us/xamarin/
https://flutter.dev/docs/get-started/install
https://facebook.github.io/react-native/docs/getting-started

59. Conclusiones

60. ¿Preguntas?

61. Redención…

62. Gracias