Android à l'ere de Compose

Découvrez comment Compose révolutionne la création d'interfaces utilisateur sur Android et apprenez les meilleures pratiques pour rester à la pointe de la technologie dans le paysage du développement natif d'aujourd'hui.

1. Le développement Android moderne à l'ère de Compose. Niamey Sabiou Godi Farouk Android Engineer Android à l'ère de Compose. Niamey Sabiou Godi Farouk Android Engineer
2. • Developpeur Android (Freelance) • Consultant Formateur • Lead Organizer GDG Maradi • Technical writer (codelabs, articles) • Speaker
3. Agenda Historique Architecture Kotlin Jetpack Compose Resources
4. Historique
5. 2014-2017 MVP 2021-Present Java 2008-2014 2017-2021 MVVM
6. Eclipse ADT (Android Developer Tools)
8. MainActivity.java Server DataSource Saved Instance State Intent
9. public class MainActivity extends AppCompatActivity implements View.OnClickListener { static Repository repository = new Repository(); final static String KEY = "Key"; TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); textView = findViewById(R.id.text_view); if (savedInstanceState != null) { // Retrieve from savedInstanceState textView.setText( savedInstanceState.getString(KEY) ); } else { // Retrieve from intent textView.setText( getIntent().getExtras().getString(KEY) ); } Button button = findViewById(R.id.btn_fetch); button.setOnClickListener(this); } @Override protected void onSaveInstanceState(@NonNull Bundle outState) { super.onSaveInstanceState(outState); // Saving to savedInstanceState outState.putString(KEY, textView.getText().toString()); } @Override public void onClick(View v) { // Retrieve from repository textView.setText(repository.getMessage()); } } Repository Saved instance state Intent retrieval
10. Android Studio 1.0
11. Android Studio Hedgehog 2023 1.1
12. MVP (Model View Presenter) Architecture
13. MVP (Model-View Presenter) MainPresenter.java View Server data MainActivity.java RxJava findviewById RecyclerView MainActivity.kt* Dagger data Action trigger instanciation Callback Intent Saved Instance state
14. MVVM (Model View ViewModel) Architecture
15. MVVM (Model-View-ViewModel) View Server data MainActivity.kt Coroutine findviewById RecyclerView Trigger Observe Intent Saved Instance state Saved state handler Dagger Hilt Inject saved state handler and repository LiveDa ta Inject view model
16. Kotlin Langage
18. • Tourne sous la JVM (Java Virtual Machine), ce qui le rend interopérable avec Java • Null Safety • Combine la POO et la Programmation Fonctionnelle • Possibilité d'écrire des scripts Kotlin (Kotlin Gradle Build Script) • Top-level functions, extensions functions … • Kotlin Multiplatform
19. • Tourne sous la JVM (Java Virtual Machine), ce qui le rend interopérable avec Java • Null Safety • Combine la POO et la Programmation Fonctionnelle • Possibilité d'écrire des scripts Kotlin (Kotlin Gradle Build Script) • Top-level functions, extensions functions … • Kotlin Multiplatform
20. • Tourne sous la JVM (Java Virtual Machine), ce qui le rend interopérable avec Java • Null Safety • Combine la POO et la Programmation Fonctionnelle • Possibilité d'écrire des scripts Kotlin (Kotlin Gradle Build Script) • Top-level functions, extensions functions … • Kotlin Multiplatform
21. • Tourne sous la JVM (Java Virtual Machine), ce qui le rend interopérable avec Java • Null Safety • Combine la POO et la Programmation Fonctionnelle • Possibilité d'écrire des scripts Kotlin (Kotlin Gradle Build Script) • Top-level functions, extensions functions … • Kotlin Multiplatform
22. • Tourne sous la JVM (Java Virtual Machine), ce qui le rend interopérable avec Java • Null Safety • Combine la POO et la Programmation Fonctionnelle • Possibilité d'écrire des scripts Kotlin (Kotlin Gradle Build Script) • Top-level functions, extensions functions … • Kotlin Multiplatform
23. • Tourne sous la JVM (Java Virtual Machine), ce qui le rend interopérable avec Java • Null Safety • Combine la POO et la Programmation Fonctionnelle • Possibilité d'écrire des scripts Kotlin (Kotlin Gradle Build Script) • Top-level functions, extensions functions … • Kotlin Multiplatform
24. Code Démo
25. abstract class Person(val name: String) { abstract fun greet() } interface FoodConsumer { fun eat() fun pay(amount: Int) = println("Montant: $amount FCA!") } class RestaurantCustomer(name: String, val plat: String) : Person(name), FoodConsumer { fun order() = println("De la $plat, SVP!") override fun eat() = println("*Mange de la $plat*") override fun greet() = println("Bonjour!) } fun main() { val farouk = RestaurantCustomer("Farouk", "salade") sam.greet() // implémentation d’une fonction abstraite sam.order() // fonction membre sam.eat() // implémentation d’une fonction d’interface sam.pay(1000) // implémentation par défaut d’une interface }
27. Kotlin Multi plateforme Technologie
28. Technologie open-source permettant le développement d’applications multi plateforme avec Kotlin. Kotlin Multiplatform vous permet de créer des applications pour différentes plateformes et de réutiliser du code entre elles tout en conservant les avantages de la programmation native.
29. UI Logic UI Logic Logic UI Une portion de la logique Quoi partager avec les autres plateformes?
30. UI Logic UI Logic Logic UI Toute la logique Quoi partager avec les autres plateformes?
31. UI Logic UI Logic UI Logic Logique + Interface Utilisateur Quoi partager avec les autres plateformes?
33. Jetpack Compose
34. Jetpack Compose est un kit de création d’interfaces utilisateur natives sur Android. Il simplifie et accélère le développement UI. Avec Jetpack Compose vous pouvez prototyper votre application avec moins de code, des outils puissants et des interfaces Kotlin intuitives.
35. • Approche impérative déclarative (Focus sur le Quoi et non le Comment) • Améliore la productivité des développeurs (Faire plus avec moins) • 100% interopérable avec les vues en XML • Codebase plus saine
36. • Approche impérative déclarative (Focus sur le Quoi et non le Comment) • Améliore la productivité des développeurs (Faire plus avec moins) • 100% interopérable avec les vues en XML • Codebase plus saine
37. • Approche impérative déclarative (Focus sur le Quoi et non le Comment) • Améliore la productivité des développeurs • 100% interopérable avec les vues en XML (rétrocompatibilité) • Codebase plus saine
38. • Approche impérative déclarative (Focus sur le Quoi et non le Comment) • Améliore la productivité des développeurs • 100% interopérable avec les vues en XML (rétrocompatibilité) • Codebase plus saine 😊
39. • React Native • SwiftUI • Flutter • Jetpack Compose
40. Fonction Composable
41. Fonction composable • Décrit une portion de votre interface • Ne renvoie rien • Prends des parametres et genere le rendu affiché sur l’ecran • Peut emetre plusieurs composants de votre UI
42. @Composable fun Button( onClick: () -> Unit, ... text: @Composable () -> Unit ) { // implementation of the Button }
43. @Composable fun Button( onClick: () -> Unit, ... text: @Composable () -> Unit ) { // implementation of the Button } Button(onClick = {}, shape = CircleShape) {}
44. @Composable fun Button( onClick: () -> Unit, ... text: @Composable () -> Unit ) { // implementation of the Button } Button(onClick = {}, shape = CircleShape) {} annotation
45. Button( onClick = { /*TODO*/ }, shape = CircleShape ) { Text(text = "DevFest Niamey 2023") }
46. Composants de base
47. This work is licensed under the Apache 2.0 License Colonne et Ligne Column Row
48. Démo
49. @Composable fun SpeakerCardDemo( onClick: () -> Unit ) { Column { Text(text = "Farouk Sabiou") Text(text = "Android Engineer") } }
50. @Composable fun SpeakerCardDemo( onClick: () -> Unit ) { Column { Text(text = "Farouk Sabiou") Text(text = "Android Engineer") } }
51. @Composable fun SpeakerCardDemo( onClick: () -> Unit ) { Row(...) { Image(...) Column { Text(text = "Farouk Sabiou") Text(text = "Android Engineer") } } }
52. @Composable fun SpeakerCardDemo( onClick: () -> Unit ) { Row(...) { Image(...) Column { Text(text = "Farouk Sabiou") Text(text = "Android Engineer") } } }
53. @Composable fun SpeakerCardDemo( onClick: () -> Unit ) { Column(...) { Row(...) { Image(...) Column { Text(text = "Farouk Sabiou") Text(text = "Android Engineer") } } Card { Image(...) } } }
54. @Composable fun SpeakerCardDemo( onClick: () -> Unit ) { Column(...) { Row(...) { Image(...) Column { Text(text = "Farouk Sabiou") Text(text = "Android Engineer") } } Card { Image(...) } } }
55. Live
56. “Threads a été développé et lancé en seulement cinq mois.” Richard Zadorozny, Software Engineer chez Threads/Instagram
57. Q&A
58. • Kotlin • Article AndroidMood sur Jetpack Compose • Understanding Jetpack Compose • Jetpack compose (site web officiel android) • Codelabs • Architecture • How Android Development Evolves Over The Years • Layout guide • Official Compose samples
59. Merci 😊
60. @0xgodi Farouk Sabiou github.com/sabiou Scannez pour ajouter mon contact