SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
LA PROGRAMMATION RÉACTIVE SUR IOS


RÉACTIVE COCOA
Nicolas Fontaine - CocoaHeads Montpellier - 12/05/2016
QU’EST-CE QUE C’EST QUE CE TRUC ?
Parlons design pattern :
La programmation réactive est née d’une utilisation avancée du pattern : « Observable /
Observer ».
Intégré à notre beau SDK iOS nous avons les NSNotification qui utilisent ce pattern
« Observable / Observer ». Mais admettons le… ce n’est pas suffisant et la plupart du temps
quand on les utilises on se cache derrière le fameux :
2
Ouai c’est pas beau
mais c’est pratique !
« C’est pas beau mais c’est pratique,
attention à cette phrase quand même »
Florence Foresti
BACKELITE
LA PROGRAMMATION RÉACTIVE
8 FÉVRIER 2016 3
Paradigme de programmation autour de flux de données et propagations du changement.
Cas d’utilisation classique :
Appels à des WebServices
Traitements de données asynchrones
Développement basé sur la notion d’évènement (très utile dans le mobile)
Gestion d’entrées utilisateur (UI)
S’oppose directement à une programmation « Bloquante » consommant beaucoup de mémoire.
Pattern architectural MVVM
BACKELITE
LA PROGRAMMATION RÉACTIVE : SUBSCRIPTION
8 FÉVRIER 2016 4
Observable
(signal)
Observer
SubscribeNext
SubscribeCompleted
SubscribeError
BACKELITE
LA PROGRAMMATION RÉACTIVE : REACTIVITY
8 FÉVRIER 2016 5
Observable
(signal)
Observer
Next (value)
Completed
BACKELITE
REACTIVE COCOA
8 FÉVRIER 2016 6
En réactive Cocoa, l’observable est qualifié de « Signal »
Exemple de création d’un signal :
S’abonner à ce signal:
BACKELITE
REACTIVE COCOA
8 FÉVRIER 2016 7
Types de signaux principaux :
Eagerly : Démarre dès qu’instancié (par défaut)
RACSignal *eagerSignal = [RACSignal startEagerlyWithScheduler:[RACScheduler
schedulerWithPriority:RACSchedulerPriorityBackground] block:^(id <RACSubscriber>
subscriber) {

Lazily : Démarre dès qu’écouté
RACSignal *lazySignal = [RACSignal startLazilyWithScheduler:[RACScheduler
schedulerWithPriority:RACSchedulerPriorityBackground] block:^(id <RACSubscriber>
subscriber) {
FLUX DE DONNÉES
Exemple :
[self showWaitingView];

RACSignal *purchaseListSignal = [[SomeManager sharedManager] retreivePurchases];

[purchaseListSignal subscribeNext:^(NSArray *purchases) {

self.purchasesArray = purchases;

[self reloadTableView];

} error:^(NSError *error) {

if (![self handleError:error]) {

[self showErrorMessage:error];

}

self.purchasesArray = @[];

[self reloadTableView];

[self hideWaitingView];



} completed:^{

[self hideWaitingView];

}];
8
Recevoir des données via le « Next »
Imaginez un viewController qui veut récupérer en ligne une liste d’achats effectués par un client
JOUER AVEC LES SIGNAUX : LES OPÉRATEURS DE TRANSFORMATION
MAP, FLATTENMAP, THEN, CATCH…
9
Map : Permet d’intervenir sur la
valeur de la donnée transmise par
un « sendNext » dans un signal
FlattenMap : Permet de « dérouter » un next en utilisant un nouveau signal
Signal
Original
Signal
map
3
Error
flattenMap : si x est impair alors
le signal devient un signal d’erreur
JOUER AVEC LES SIGNAUX : LES OPÉRATEURS COMBINATOIRES
CONCAT, MERGE, SAMPLE, COMBINELATEST
10
Concat : Permet de séquencer des
signaux en un seul signal dont les
« next » sont ceux des signaux qui
le composent et où une erreur
arrête la séquence. Un concat
envoie « completed » quand le
dernier de ses « sous signaux »
l’aura fait.
Merge : Même principe que le
concat mais en parallelisant cette
fois les signaux.
JOUER AVEC LES SIGNAUX : LES OPÉRATEURS SONT NOMBREUX !!!!
11
Opérateurs de filtre :
filter, skip, distinct, first, last…
Opérateurs mathématiques :
average, count, max, min, reduce,
sum…
Opérateurs booléens :
every, some, includes…
REACTIVE COCOA SUR L’UI
12
Reactive cocoa vient avec beaucoup de catégories sur des classes
d’UI.
Par exemple, les textfields. Où l’on pourra sortir un signal nous
permettant de recevoir dans un « next » le text tapé à chaque
nouveau caractère. Une élégante alternative aux méthodes
delegates.
EXEMPLES D’UTILISATION SUR L’UI :
13
Sur un bouton :
[[self.aButton
rac_signalForControlEvents:UIControlEventTouchUpInside]
subscribeNext:^(id x) {
NSLog(@"button clicked");
}];
Sur un textfield :
[[self.aTextField.rac_textSignal
map:^id(NSString *text) {
return @(text.length);
}] subscribeNext:^(NSNumber *length) {
NSLog(@"%@", length);
self.aTextField.textColor = (length.integerValue > 5) ?
[UIColor greenColor] : [UIColor blackColor];
}];
}
LES SCHEDULERS
14
Un signal possède un « scheduler »
A la création d’un signal, le scheduler par défaut est sur le thread
courant.
Dans le cas d’une utilisation d’un scheduler « background », il faut faire
bien attention aux répercutions côté UI.
Si le subscriber se trouve être sur l’UI, il ne faudra pas oublier
d’employer l’opérateur : « DeliverOnMainThread » afin que tout
changements faits à l’UI dans les block next/error/completed se
répercutent directement sur l’interface.
LES TESTS UNITAIRES ET REACTIVE COCOA
15
C’est possible mais… C’est moche pas très élégant.
En effet on devra utiliser une méthode sur un signal pour « bloquer » la suite
du test jusqu’à ce que ce signal soit terminé.
[historySignal waitUntilCompleted:error];
XCAssertTrue(quelquechose);
REACTIVE COCOA EST AUJOURD’HUI EN VERSION 4.1
MAIS LA DERNIÈRE VERSION COMPATIBLE AVEC IOS 7 EST LA 2.5
RXSWIFT SEMBLE S’IMPOSER COMME LA LIBRAIRIE
ÉQUIVALENTE POUR LE NOUVEAU LANGAGE DE LA
POMME
Nota Bene
AVANT DE PASSER À UN EXEMPLE…
DES QUESTIONS ?
EXEMPLE DE CODE :
18
UN ENCHAÎNEMENT PARTICULIER D’APPELS WEBSERVICES AVEC
UNE PROGRESS BAR
HTTPS://WWW.RAYWENDERLICH.COM/62699/REACTIVECOCOA-TUTORIAL-PT1
LIENS UTILES
HTTP://RXMARBLES.COM
HTTPS://GITHUB.COM/REACTIVECOCOA/REACTIVECOCOA

Contenu connexe

Tendances

Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Ruau Mickael
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Ruau Mickael
 
Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?Ruau Mickael
 
Programmation evénementielle
Programmation evénementielleProgrammation evénementielle
Programmation evénementielleKokou Gaglo
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 

Tendances (8)

Promises Javascript
Promises JavascriptPromises Javascript
Promises Javascript
 
Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?Javascript objet : que fait ce code ?
Javascript objet : que fait ce code ?
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
 
Cours php
Cours phpCours php
Cours php
 
Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?Javascript - Tableaux : que fait ce code ?
Javascript - Tableaux : que fait ce code ?
 
Programmation evénementielle
Programmation evénementielleProgrammation evénementielle
Programmation evénementielle
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Php1
Php1Php1
Php1
 

En vedette

Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPodsCocoaHeads France
 
10 user experience trends in 2015
10 user experience trends in 201510 user experience trends in 2015
10 user experience trends in 2015Idean France
 
The top 9 Tech trends for 2016
The top 9 Tech trends for 2016The top 9 Tech trends for 2016
The top 9 Tech trends for 2016Idean France
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqIdean France
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...Idean France
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experienceIdean France
 
Boost the ROI of your digital presence
Boost the ROI of your digital presenceBoost the ROI of your digital presence
Boost the ROI of your digital presenceIdean France
 
Backelite digital agency presentation_English
Backelite digital agency presentation_EnglishBackelite digital agency presentation_English
Backelite digital agency presentation_EnglishIdean France
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016Idean France
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016Idean France
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User ExperiencePatrick Neeman
 
Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014servicesmobiles.fr
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoTUX REPUBLIC
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Carine Lallemand
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017Idean France
 
Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...
Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...
Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...Publicis Sapient Engineering
 
Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?Frederic_Veidig
 
Opérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserOpérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserIdean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingCocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingIdean France
 

En vedette (20)

Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPods
 
10 user experience trends in 2015
10 user experience trends in 201510 user experience trends in 2015
10 user experience trends in 2015
 
The top 9 Tech trends for 2016
The top 9 Tech trends for 2016The top 9 Tech trends for 2016
The top 9 Tech trends for 2016
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey Hacq
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experience
 
Boost the ROI of your digital presence
Boost the ROI of your digital presenceBoost the ROI of your digital presence
Boost the ROI of your digital presence
 
Backelite digital agency presentation_English
Backelite digital agency presentation_EnglishBackelite digital agency presentation_English
Backelite digital agency presentation_English
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User Experience
 
Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017
 
Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...
Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...
Back Day Xebia / Typesafe : La programmation réactive pour répondre aux défis...
 
Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?
 
Opérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserOpérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poser
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingCocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
 

Similaire à Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réactive Cocoa

Introduction au développement Android
Introduction au développement AndroidIntroduction au développement Android
Introduction au développement AndroidSteve Tremblay
 
Web dev open door
Web dev   open doorWeb dev   open door
Web dev open doorLeTesteur
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorArthurMaroulier
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 
Rapport atelier Web App Security 2015
Rapport atelier Web App Security 2015Rapport atelier Web App Security 2015
Rapport atelier Web App Security 2015Hamza Ben Marzouk
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetCocoaHeads France
 
Activity
ActivityActivity
Activitydido
 
AOP.pptx
AOP.pptxAOP.pptx
AOP.pptxManalAg
 
Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Farouk Mezghich
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1Sem Koto
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1Sem Koto
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSRenaud Dumont
 
Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...
Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...
Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...Frédéric FAURE
 
Ysance conference - cloud computing - aws - 3 mai 2010
Ysance   conference - cloud computing - aws - 3 mai 2010Ysance   conference - cloud computing - aws - 3 mai 2010
Ysance conference - cloud computing - aws - 3 mai 2010Ysance
 

Similaire à Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réactive Cocoa (20)

Introduction au développement Android
Introduction au développement AndroidIntroduction au développement Android
Introduction au développement Android
 
Web dev open door
Web dev   open doorWeb dev   open door
Web dev open door
 
Atelier gwt
Atelier gwtAtelier gwt
Atelier gwt
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
mix-it 2011
mix-it 2011mix-it 2011
mix-it 2011
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Rapport atelier Web App Security 2015
Rapport atelier Web App Security 2015Rapport atelier Web App Security 2015
Rapport atelier Web App Security 2015
 
rapportWAS
rapportWASrapportWAS
rapportWAS
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey Bocquet
 
Activity
ActivityActivity
Activity
 
AOP.pptx
AOP.pptxAOP.pptx
AOP.pptx
 
Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...
Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...
Amazon Web Services User Group - France - 3 mai 2010 - Optimisation et Automa...
 
Ysance conference - cloud computing - aws - 3 mai 2010
Ysance   conference - cloud computing - aws - 3 mai 2010Ysance   conference - cloud computing - aws - 3 mai 2010
Ysance conference - cloud computing - aws - 3 mai 2010
 
My droid
My droidMy droid
My droid
 

Plus de Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}Idean France
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutIdean France
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Idean France
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Idean France
 
Cocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSCocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSIdean France
 

Plus de Idean France (20)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
 
Cocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSCocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOS
 

Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réactive Cocoa

  • 1. LA PROGRAMMATION RÉACTIVE SUR IOS 
 RÉACTIVE COCOA Nicolas Fontaine - CocoaHeads Montpellier - 12/05/2016
  • 2. QU’EST-CE QUE C’EST QUE CE TRUC ? Parlons design pattern : La programmation réactive est née d’une utilisation avancée du pattern : « Observable / Observer ». Intégré à notre beau SDK iOS nous avons les NSNotification qui utilisent ce pattern « Observable / Observer ». Mais admettons le… ce n’est pas suffisant et la plupart du temps quand on les utilises on se cache derrière le fameux : 2 Ouai c’est pas beau mais c’est pratique ! « C’est pas beau mais c’est pratique, attention à cette phrase quand même » Florence Foresti
  • 3. BACKELITE LA PROGRAMMATION RÉACTIVE 8 FÉVRIER 2016 3 Paradigme de programmation autour de flux de données et propagations du changement. Cas d’utilisation classique : Appels à des WebServices Traitements de données asynchrones Développement basé sur la notion d’évènement (très utile dans le mobile) Gestion d’entrées utilisateur (UI) S’oppose directement à une programmation « Bloquante » consommant beaucoup de mémoire. Pattern architectural MVVM
  • 4. BACKELITE LA PROGRAMMATION RÉACTIVE : SUBSCRIPTION 8 FÉVRIER 2016 4 Observable (signal) Observer SubscribeNext SubscribeCompleted SubscribeError
  • 5. BACKELITE LA PROGRAMMATION RÉACTIVE : REACTIVITY 8 FÉVRIER 2016 5 Observable (signal) Observer Next (value) Completed
  • 6. BACKELITE REACTIVE COCOA 8 FÉVRIER 2016 6 En réactive Cocoa, l’observable est qualifié de « Signal » Exemple de création d’un signal : S’abonner à ce signal:
  • 7. BACKELITE REACTIVE COCOA 8 FÉVRIER 2016 7 Types de signaux principaux : Eagerly : Démarre dès qu’instancié (par défaut) RACSignal *eagerSignal = [RACSignal startEagerlyWithScheduler:[RACScheduler schedulerWithPriority:RACSchedulerPriorityBackground] block:^(id <RACSubscriber> subscriber) {
 Lazily : Démarre dès qu’écouté RACSignal *lazySignal = [RACSignal startLazilyWithScheduler:[RACScheduler schedulerWithPriority:RACSchedulerPriorityBackground] block:^(id <RACSubscriber> subscriber) {
  • 8. FLUX DE DONNÉES Exemple : [self showWaitingView];
 RACSignal *purchaseListSignal = [[SomeManager sharedManager] retreivePurchases];
 [purchaseListSignal subscribeNext:^(NSArray *purchases) {
 self.purchasesArray = purchases;
 [self reloadTableView];
 } error:^(NSError *error) {
 if (![self handleError:error]) {
 [self showErrorMessage:error];
 }
 self.purchasesArray = @[];
 [self reloadTableView];
 [self hideWaitingView];
 
 } completed:^{
 [self hideWaitingView];
 }]; 8 Recevoir des données via le « Next » Imaginez un viewController qui veut récupérer en ligne une liste d’achats effectués par un client
  • 9. JOUER AVEC LES SIGNAUX : LES OPÉRATEURS DE TRANSFORMATION MAP, FLATTENMAP, THEN, CATCH… 9 Map : Permet d’intervenir sur la valeur de la donnée transmise par un « sendNext » dans un signal FlattenMap : Permet de « dérouter » un next en utilisant un nouveau signal Signal Original Signal map 3 Error flattenMap : si x est impair alors le signal devient un signal d’erreur
  • 10. JOUER AVEC LES SIGNAUX : LES OPÉRATEURS COMBINATOIRES CONCAT, MERGE, SAMPLE, COMBINELATEST 10 Concat : Permet de séquencer des signaux en un seul signal dont les « next » sont ceux des signaux qui le composent et où une erreur arrête la séquence. Un concat envoie « completed » quand le dernier de ses « sous signaux » l’aura fait. Merge : Même principe que le concat mais en parallelisant cette fois les signaux.
  • 11. JOUER AVEC LES SIGNAUX : LES OPÉRATEURS SONT NOMBREUX !!!! 11 Opérateurs de filtre : filter, skip, distinct, first, last… Opérateurs mathématiques : average, count, max, min, reduce, sum… Opérateurs booléens : every, some, includes…
  • 12. REACTIVE COCOA SUR L’UI 12 Reactive cocoa vient avec beaucoup de catégories sur des classes d’UI. Par exemple, les textfields. Où l’on pourra sortir un signal nous permettant de recevoir dans un « next » le text tapé à chaque nouveau caractère. Une élégante alternative aux méthodes delegates.
  • 13. EXEMPLES D’UTILISATION SUR L’UI : 13 Sur un bouton : [[self.aButton rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) { NSLog(@"button clicked"); }]; Sur un textfield : [[self.aTextField.rac_textSignal map:^id(NSString *text) { return @(text.length); }] subscribeNext:^(NSNumber *length) { NSLog(@"%@", length); self.aTextField.textColor = (length.integerValue > 5) ? [UIColor greenColor] : [UIColor blackColor]; }]; }
  • 14. LES SCHEDULERS 14 Un signal possède un « scheduler » A la création d’un signal, le scheduler par défaut est sur le thread courant. Dans le cas d’une utilisation d’un scheduler « background », il faut faire bien attention aux répercutions côté UI. Si le subscriber se trouve être sur l’UI, il ne faudra pas oublier d’employer l’opérateur : « DeliverOnMainThread » afin que tout changements faits à l’UI dans les block next/error/completed se répercutent directement sur l’interface.
  • 15. LES TESTS UNITAIRES ET REACTIVE COCOA 15 C’est possible mais… C’est moche pas très élégant. En effet on devra utiliser une méthode sur un signal pour « bloquer » la suite du test jusqu’à ce que ce signal soit terminé. [historySignal waitUntilCompleted:error]; XCAssertTrue(quelquechose);
  • 16. REACTIVE COCOA EST AUJOURD’HUI EN VERSION 4.1 MAIS LA DERNIÈRE VERSION COMPATIBLE AVEC IOS 7 EST LA 2.5 RXSWIFT SEMBLE S’IMPOSER COMME LA LIBRAIRIE ÉQUIVALENTE POUR LE NOUVEAU LANGAGE DE LA POMME Nota Bene
  • 17. AVANT DE PASSER À UN EXEMPLE… DES QUESTIONS ?
  • 18. EXEMPLE DE CODE : 18 UN ENCHAÎNEMENT PARTICULIER D’APPELS WEBSERVICES AVEC UNE PROGRESS BAR