Cappuccino - ou comment créer une application web en 5 minutes

Cappuccinooucommentcréeruneapplica0onweben5’

DidierKorthoudtDirecteurgénéralSEGI-ULg

GeeksAnonymesLiège1erfévrier2017

Sommaire1. Contexte2. Cappuccino?3. Pros&Cons4. Démo(s)5. Conclusion

Contexte

Moi,mavie,monœuvre…

SEGI&Cappuccino?

• Évolu0ondenosdeuxprincipauxlogicielsversapplica0onsweb

• SybasePowerbuilderenfindevie(aprèsrachatparSAP)

• Mobilité,misesàjour,compa0bilitéWindows,MacOS,Linux

• «SPA»(SinglePageApplica0on)avecbackendJ2EE

➡ Recherched’unframeworkJavascript

Frameworksévalués

…

Mais…

• Applica0onweb≠collec0ondetags

• ULIS&myULgsont2applica0onsmastodontes

➡ Quiddelamaintenabilité?

• Quiddel’expérienceu0lisateur(habituésàuneapplica0on«desktop»tradi0onnelle)?

Puis,auhasarddeGoogle…

cappuccino-project.org

(suspenseinsoutenable)

➡ PoCU3byDK

➡ QuesNons

MaispourquoileDG…?

… semêle-t-ildedévelopperunPoC?

Ilnesaitplusprogrammeraprès10ansd’abs0nence…

(etc’estnotreboulot…)

… semêle-t-ildechoisirunframework?

C’estnousquiallonsdevoirl’u0liser…

(etc’estnotreboulot…)

MaispourquoileDG…?

• Toutsimplementparcequecelaaexactementdonnél’effetescompté:

6(7)PoCen4moisaulieude0en2ans…

(Jesupposelavolontédefairemieuxquele«vieilex-développeurtotalementlargué»…)

• Choix (plusgrandeadop0onparl’équipecarplusorientéJava)

• Poursuitedudéveloppementd’unmoduleULISindépendant(organigrammes)enCappuccino

• Poursuite(à0trepersonnel)delacontribuNonauprojetp.ex.implémenta0ondes«trackingareas»

• SouNenauprojetp.ex.réponseauxques0onsposéessurforum/Giier,fixes,organisa0ondeCappCon2016

(temporairement😉)

Finalement…

fixésurZK

Cappuccino?

Cappuccino?

FrameworkJavascriptDéveloppementd’applicaNonsweb

2006-2007-2008

• FranciscoTolmasky(USC2006,AppledeviPhone),RossBoucher(USC2007,ApplebackendiTunes),TomRobinson(USC2008)créent280North.com

• Objec0f:développerensembledesapplica0onswebd’unniveauéquivalentauxapplica0onsdesktop…

• Constatimplacable:<HTML/CSS/JS>pasadapté…

2006-2007-2008

TomalskyavaitconçuObjecNve-Jdurantsesétudes:

• SupersetdeJavascript(//Objec0ve-CvsC)• Implémenta0ondu«Messagepassing»(Smalltalk)

• Exécu0ondanslenavigateur• Aucunplug-in• ClientsidepreprocessorObjec0ve-J➜Javascript

2008

280NorthdéveloppeCappuccino

• Ré-implémenta0ondeCocoaenObjecNve-J• Founda0on,AppKit,CoreGraphics,CoreAnima0on• AbstracNoncomplètedelaDOM!• Développerpourleweb = DévelopperenCocoa!

2009:280Slides

2010:Atlas

2010

• 280NorthestrachetéparMotorola• Cappuccino&Objec0ve-JdeviennentOpenSource(GNULGPL) maisMotorolagardelesapplica0onspoursonusagepropre…

• CoreDevs(2017):• AlexanderLjunberg(UK)• AntoineMercadal(France-USA)• AlexandreWilhelm(France-USA)• Mar0nCarlberg(Suède)

• GitHub:hips://github.com/cappuccino/cappuccino• Web:hip://cappuccino-project.org/

ObjecNve-J

Classe

@implementation Personne : CPObject{

CPString _nom;CPString _prenom;

}

- (CPString)nom{

return _nom;}

- (void)setNom:(CPString)unNom{

_nom = unNom;}

@end

Classe

@implementation Personne : CPObject{

CPString _nom @accessors(property=nom);CPString _prenom;

}

@end

Classe

@implementation Personne : CPObject{

CPString _nom @accessors(property=nom);CPString _prenom @accessors(property=prenom);

}

- (CPString)nomPrenom{

return [CPString stringWithFormat:@"%@ %@", _nom, _prenom];

}

@end

Classe

@implementation Personne : CPObject{

CPString _nom @accessors(property=nom);CPString _prenom @accessors(property=prenom);

}

- (CPString)nomPrenom{

return _nom + " " + _prenom;}

@end

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

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]){

…}

QuelquesparNcularités

• nilreprésentenullmaisilestpossibledeluipasserdesmessagessansgénérerd’erreur!..

foo = [nil valueForKey:@"bar"]; ( foo = nil )

• YES & NO aulieude true & false

• KVC(Key-ValueCoding)permetd’accéderauxpropriétésd’unobjetàl’aidedevalueForKey:

var monNom = [moi nom] ⬌ var monNom = [moi valueForKey:@"nom"]

Pra0quesilapropriétéestconnuedynamiquement(aurun0me):

var laPropriete = @"nom";var laValeur = [moi valueForKey:laPropriete];

• KVO(Key-ValueObserving)permetd’êtreno0fiéd’unchangementdevalued’unepropriété:

[moi addObserver:self forKeyPath:@"nom" options:CPKeyValueObservingOptionNew context:nil];

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"

Cappuccino

QuelquesparNcularités

• ClassesCocoapréfixéespar«NS»(pourNextStep)• ClassesCappuccinopréfixéespar«CP»(pourCappuccino;-) P.ex. NSTextField ➜CPTextField NSMutableArray ➜CPMutableArray

• FoundaNon: ClassedebaseCPObject +CPArray,CPDic0onary,CPString,CPUndoManager,…

• AppKit: ClassedebaseCPView +CPControl,CPMenu,CPTableView,CPBuion,…

• Supportdeframeworks0ers(LightObject,NUKit,…)

Leplusimportant:Reproduitl’environnementdedéveloppementMacOS!API,delegates,datasources,UI,AutoLayout,bindings,…

• Xcode:éditeur,UIdesign,versioning,datamodels,…

+XcodeCapp(liaisonXcode-Cappuccino)

• Compilateur

• Testsunitaires:OJTest

• TestsfoncNonnelsUI:Cucapp(CucumberforCappuccino)

• Debugging,profiling,…:Safari,Chrome,Firefox

• Pourtests:VMWare

OuNls

• Sitewebpourini0a0on,documenta0onspécifique,…

• GroupeGooglepour ques0ons/réponses(ac0f!)

• GitHub&channelGiler

• ConceptsCocoa&documenta0ondétaillée(enmilliersdepages)dansXCode,chezApple(MacDevCenter),livres,…

Ressources

Pros&Cons

• Courbed’appren0ssageélevéepourundéveloppeurhorsMacOS/iOS

• NécessitedepréférenceunMac

• Communautérestreinte

• Quiddelapérennité?

• Environnementisolé:langagespécifique,APIspécifiques

• Looktrès(trop)MacOS

"• Courbed’appren0ssagerapidepourundéveloppeurMacOS/iOS

• Et?..

• Communautédeprofessionnelsu0lisantCappuccinoauquo0dien

• Commen’importequelautreframeworkopensource… (btw,existedepuis2009)

• Possibilitéd’intégrerd’autresframeworksJS,d’accéderàlaDOM

• Systèmedethèmes…

#

Démo(s)

Conclusion

• 100%orientéapplica0on!

• 0%orienté<HTML/CSS/Tags>

• Frameworkcompletetextensible

• Compa0bleaveclesnavigateursactuels(ycomprisIE8+)

• Maintenabilité,lisibilité,…

PourquoichoisirCappuccino?

Développeruneapplica0onweb,c’estd’aborddévelopperuneapplica0on,lewebn’étantqu’unmédium,pasundictat…

QuesNons?