par Didier Korthoudt, aux Geeks Anonymes du 1/2/2017

1. Cappuccino
ou comment créer une
applica0on web en 5’
Didier Korthoudt
Directeur général SEGI-ULg
Geeks Anonymes Liège
1er février 2017

2. Sommaire
1. Contexte
2. Cappuccino ?
3. Pros & Cons
4. Démo(s)
5. Conclusion

3. Contexte

4. Moi, ma vie, mon œuvre…

5. SEGI & Cappuccino ?
• Évolu0on de nos deux principaux logiciels vers applica0ons web
• Sybase Powerbuilder en fin de vie (après rachat par SAP)
• Mobilité, mises à jour, compa0bilité Windows, MacOS, Linux
• « SPA » (Single Page Applica0on) avec backend J2EE
➡ Recherche d’un framework Javascript

6. Frameworks évalués
…

7. Mais…
• Applica0on web ≠ collec0on de tags
• ULIS & myULg sont 2 applica0ons mastodontes
➡ Quid de la maintenabilité ?
• Quid de l’expérience u0lisateur (habitués à une
applica0on « desktop » tradi0onnelle) ?

8. Puis, au hasard de Google…
cappuccino-project.org

9. ( suspense insoutenable )

10. ➡ PoC U3 by DK

11. ➡ QuesNons

12. Mais pourquoi le DG… ?
… se mêle-t-il de développer un
PoC ?
Il ne sait plus programmer
après 10 ans d’abs0nence…
( et c’est notre boulot… )
… se mêle-t-il de choisir un
framework ?
C’est nous qui allons devoir
l’u0liser…
( et c’est notre boulot… )

14. Mais pourquoi le DG… ?
• Tout simplement parce que cela a exactement donné
l’effet escompté :
6 (7) PoC en 4 mois au lieu de 0 en 2 ans…
( Je suppose la volonté de faire mieux que le « vieil ex-
développeur totalement largué »… )

15. • Choix
(plus grande adop0on par l’équipe car plus orienté Java)
• Poursuite du développement d’un module ULIS
indépendant (organigrammes) en Cappuccino
• Poursuite (à 0tre personnel) de la contribuNon au projet
p.ex. implémenta0on des « tracking areas »
• SouNen au projet
p.ex. réponse aux ques0ons posées sur forum / Giier,
fixes, organisa0on de CappCon 2016
(temporairement 😉)
Finalement…
fixé sur ZK

17. Cappuccino ?

18. Cappuccino ?
Framework Javascript
Développement d’applicaNons web

19. 2006-2007-2008
• Francisco Tolmasky (USC 2006, Apple dev iPhone), Ross
Boucher (USC 2007, Apple backend iTunes), Tom Robinson
(USC 2008) créent 280North.com
• Objec0f : développer ensemble des applica0ons web d’un
niveau équivalent aux applica0ons desktop…
• Constat implacable : <HTML/CSS/JS> pas adapté…

20. 2006-2007-2008
Tomalsky avait conçu ObjecNve-J durant ses études :
• Superset de Javascript ( // Objec0ve-C vs C )
• Implémenta0on du « Message passing »
( Smalltalk )
• Exécu0on dans le navigateur
• Aucun plug-in
• Client side preprocessor
Objec0ve-J ➜ Javascript

21. 2008
280North développe Cappuccino
• Ré-implémenta0on de Cocoa en ObjecNve-J
• Founda0on, AppKit, CoreGraphics, CoreAnima0on
• AbstracNon complète de la DOM !
• Développer pour le web
=
Développer en Cocoa !

22. 2009 : 280Slides

23. 2010 : Atlas

24. 2010
• 280North est racheté par Motorola
• Cappuccino & Objec0ve-J deviennent OpenSource (GNU LGPL)
mais Motorola garde les applica0ons pour son usage propre…
• CoreDevs (2017) :
• Alexander Ljunberg (UK)
• Antoine Mercadal (France-USA)
• Alexandre Wilhelm (France-USA)
• Mar0n Carlberg (Suède)
• GitHub : hips://github.com/cappuccino/cappuccino
• Web : hip://cappuccino-project.org/

25. ObjecNve-J

26. Classe
@implementation Personne : CPObject
{
CPString _nom;
CPString _prenom;
}
- (CPString)nom
{
return _nom;
}
- (void)setNom:(CPString)unNom
{
_nom = unNom;
}
@end

27. Classe
@implementation Personne : CPObject
{
CPString _nom @accessors(property=nom);
CPString _prenom;
}
@end

28. Classe
@implementation Personne : CPObject
{
CPString _nom @accessors(property=nom);
CPString _prenom @accessors(property=prenom);
}
- (CPString)nomPrenom
{
return [CPString stringWithFormat:@"%@ %@", _nom,
_prenom];
}
@end

29. Classe
@implementation Personne : CPObject
{
CPString _nom @accessors(property=nom);
CPString _prenom @accessors(property=prenom);
}
- (CPString)nomPrenom
{
return _nom + " " + _prenom;
}
@end

30. Classe
@implementation Personne : CPObject
{
CPString _nom @accessors(property=nom);
CPString _prenom @accessors(property=prenom);
}
+ (Personne)personneAvecNom:(CPString)unNom prenom:(CPString)unPrenom
{
return [[Personne alloc] initWithNom:unNom prenom:unPrenom];
}
- (id)initWithNom:(CPString)unNom prenom:(CPString)unPrenom
{
self = [super init];
if (self)
{
_nom = unNom;
_prenom = unPrenom;
}
return self;
}
@end

31. UNlisaNon
var moi = [Personne personneAvecNom:@"Korthoudt"
prenom:@"Didier"];
var moi = [[Personne alloc] initWithNom:@"Korthoudt"
prenom:@"Didier"];
var monNom = [moi nom];
var monNomPrenom = [moi nomPrenom];
var prenomNom = [CPString stringWithFormat:@"%@ %@",
[moi prenom], [moi nom]];
if ([nomPrenom isEqualToString:prenomNom])
{
…
}

32. Quelques parNcularités
• nil représente null mais il est possible de lui passer des messages sans générer d’erreur !..
foo = [nil valueForKey:@"bar"]; ( foo = nil )
• YES & NO au lieu de true & false
• KVC (Key-Value Coding) permet d’accéder aux propriétés d’un objet à l’aide de valueForKey :
var monNom = [moi nom] ⬌ var monNom = [moi valueForKey:@"nom"]
Pra0que si la propriété est connue dynamiquement (au run0me) :
var laPropriete = @"nom";
var laValeur = [moi valueForKey:laPropriete];
• KVO (Key-Value Observing) permet d’être no0fié d’un changement de value d’une propriété :
[moi addObserver:self forKeyPath:@"nom"
options:CPKeyValueObservingOptionNew context:nil];

33. Catégories
@import <Foundation/CPString.j>
@implementation CPString (Reversing)
- (CPString)reverse
{
var reversedString = @"",
index = [self length];
while (index--)
reversedString += [self characterAtIndex:index];
return reversedString;
}
@end
var myString = @"hello world",
reversed = [myString reverse];
alert(reversed); //"dlrow olleh"

34. Cappuccino

35. Quelques parNcularités
• Classes Cocoa préfixées par « NS » (pour NextStep)
• Classes Cappuccino préfixées par « CP » (pour Cappuccino ;-)
P.ex. NSTextField ➜ CPTextField
NSMutableArray ➜ CPMutableArray
• FoundaNon : Classe de base CPObject
+ CPArray, CPDic0onary, CPString, CPUndoManager, …
• AppKit : Classe de base CPView
+ CPControl, CPMenu, CPTableView, CPBuion, …
• Support de frameworks 0ers (LightObject, NUKit, …)

36. Le plus important :
Reproduit l’environnement de développement MacOS !
API, delegates, data sources, UI, AutoLayout, bindings, …

37. • Xcode : éditeur, UI design, versioning, data models, …
+ XcodeCapp (liaison Xcode - Cappuccino)
• Compilateur
• Tests unitaires : OJTest
• Tests foncNonnels UI : Cucapp (Cucumber for
Cappuccino)
• Debugging, profiling, … : Safari, Chrome, Firefox
• Pour tests : VMWare
OuNls

38. • Site web pour ini0a0on,
documenta0on spécifique, …
• Groupe Google pour
ques0ons / réponses (ac0f !)
• GitHub & channel Giler
• Concepts Cocoa & documenta0on
détaillée (en milliers de pages) dans
XCode, chez Apple (Mac Dev
Center), livres, …
Ressources

39. Pros & Cons

40. • Courbe d’appren0ssage élevée pour
un développeur hors MacOS / iOS
• Nécessite de préférence un Mac
• Communauté restreinte
• Quid de la pérennité ?
• Environnement isolé : langage
spécifique, API spécifiques
• Look très (trop) MacOS
" • Courbe d’appren0ssage rapide pour
un développeur MacOS / iOS
• Et ?..
• Communauté de professionnels
u0lisant Cappuccino au quo0dien
• Comme n’importe quel autre
framework open source…
(btw, existe depuis 2009)
• Possibilité d’intégrer d’autres
frameworks JS, d’accéder à la DOM
• Système de thèmes…
#

43. Démo(s)

44. Conclusion

45. • 100% orienté applica0on !
• 0% orienté <HTML/CSS/Tags>
• Framework complet et extensible
• Compa0ble avec les navigateurs
actuels (y compris IE 8+)
• Maintenabilité, lisibilité, …
Pourquoi choisir Cappuccino ?

46. Développer une applica0on
web, c’est d’abord développer
une applica0on, le web n’étant
qu’un médium, pas un dictat…

47. QuesNons ?