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

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

Embed Size (px)

Citation preview

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

Cappuccinooucommentcréeruneapplica0onweben5’

DidierKorthoudtDirecteurgénéralSEGI-ULg

GeeksAnonymesLiège1erfévrier2017

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

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

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

Contexte

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

Moi,mavie,monœuvre…

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

SEGI&Cappuccino?

• Évolu0ondenosdeuxprincipauxlogicielsversapplica0onsweb

• SybasePowerbuilderenfindevie(aprèsrachatparSAP)

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

• «SPA»(SinglePageApplica0on)avecbackendJ2EE

➡ Recherched’unframeworkJavascript

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

Frameworksévalués

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

Mais…

• Applica0onweb≠collec0ondetags

• ULIS&myULgsont2applica0onsmastodontes

➡ Quiddelamaintenabilité?

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

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

Puis,auhasarddeGoogle…

cappuccino-project.org

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

(suspenseinsoutenable)

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

➡ PoCU3byDK

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

➡ QuesNons

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

MaispourquoileDG…?

… semêle-t-ildedévelopperunPoC?

Ilnesaitplusprogrammeraprès10ansd’abs0nence…

(etc’estnotreboulot…)

… semêle-t-ildechoisirunframework?

C’estnousquiallonsdevoirl’u0liser…

(etc’estnotreboulot…)

Page 13: Cappuccino - ou comment créer une application web en 5 minutes
Page 14: Cappuccino - ou comment créer une application web en 5 minutes

MaispourquoileDG…?

• Toutsimplementparcequecelaaexactementdonnél’effetescompté:

6(7)PoCen4moisaulieude0en2ans…

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

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

• 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

Page 16: Cappuccino - ou comment créer une application web en 5 minutes
Page 17: Cappuccino - ou comment créer une application web en 5 minutes

Cappuccino?

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

Cappuccino?

FrameworkJavascriptDéveloppementd’applicaNonsweb

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

2006-2007-2008

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

• Objec0f:développerensembledesapplica0onswebd’unniveauéquivalentauxapplica0onsdesktop…

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

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

2006-2007-2008

TomalskyavaitconçuObjecNve-Jdurantsesétudes:

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

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

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

2008

280NorthdéveloppeCappuccino

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

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

2009:280Slides

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

2010:Atlas

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

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/

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

ObjecNve-J

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

Classe

@implementation Personne : CPObject{

CPString _nom;CPString _prenom;

}

- (CPString)nom{

return _nom;}

- (void)setNom:(CPString)unNom{

_nom = unNom;}

@end

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

Classe

@implementation Personne : CPObject{

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

}

@end

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

Classe

@implementation Personne : CPObject{

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

}

- (CPString)nomPrenom{

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

}

@end

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

Classe

@implementation Personne : CPObject{

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

}

- (CPString)nomPrenom{

return _nom + " " + _prenom;}

@end

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

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

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

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

…}

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

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];

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

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"

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

Cappuccino

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

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,…)

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

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

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

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

+XcodeCapp(liaisonXcode-Cappuccino)

• Compilateur

• Testsunitaires:OJTest

• TestsfoncNonnelsUI:Cucapp(CucumberforCappuccino)

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

• Pourtests:VMWare

OuNls

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

• Sitewebpourini0a0on,documenta0onspécifique,…

• GroupeGooglepour ques0ons/réponses(ac0f!)

• GitHub&channelGiler

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

Ressources

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

Pros&Cons

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

• 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…

#

Page 41: Cappuccino - ou comment créer une application web en 5 minutes
Page 42: Cappuccino - ou comment créer une application web en 5 minutes
Page 43: Cappuccino - ou comment créer une application web en 5 minutes

Démo(s)

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

Conclusion

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

• 100%orientéapplica0on!

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

• Frameworkcompletetextensible

• Compa0bleaveclesnavigateursactuels(ycomprisIE8+)

• Maintenabilité,lisibilité,…

PourquoichoisirCappuccino?

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

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

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

QuesNons?