Xcode, c’est très puissant, mais devoir recompiler, charger et relancer son application à chaque fois qu’on fait une modification dans le code, ça devient vite fastidieux. Si les changements dans le code pouvaient s’appliquer en temps réel dans l’application, on gagnerait pas mal de temps qu’on pourrait consacrer à expérimenter des idées nouvelles et à améliorer nos apps. Un rêve ? Plus vraiment.
Celedev, une startup rennaise, a développé un environnement de développement pour iOS entièrement conçu autour de cette idée de Programmation Responsive. Jean-Luc Jumpertz (créateur de Celedev) est venu nous présenter cet outil et nous faire une petite démo.
3. celedev
Évolution des apps iOS
• Des appareils mobiles de plus en plus
puissants, avec des écrans plus grands
• un OS de plus en plus riche et sophistiqué,
• un SDK de plus en plus vaste
4. celedev
Évolution des apps iOS
• Des appareils mobiles de plus en plus
puissants, avec des écrans plus grands
• un OS de plus en plus riche et sophistiqué,
• un SDK de plus en plus vaste
Cor
e
ut
o
o
ut
A
ay
L
t
ame Ki
G
Anim
Tex
tK
it
atio
n
Spr
Kit
ite
ics
nam
y
U
it D
IK
5. celedev
Évolution des apps iOS
• Des appareils mobiles de plus en plus
puissants, avec des écrans plus grands
• un OS de plus en plus riche et sophistiqué,
• un SDK de plus en plus vaste
2013
▶ une meilleure expérience
utilisateur (UX)
▶ des Apps plus complexes
▶ des développements plus longs
2013
6. • Xcode est incontournable sur iOS / OS X
• un excellent et très puissant IDE
• mais son cycle de compilation / exécution reste
traditionnel
1. Edit
2. Build
3. Load
7. Debug
celedev
Outils de développement
4. Run
5. Setup
6. Test
7. celedev
La vision de celedev
• La Programmation Responsive
• interactivité maximale entre le développeur
et son application
• bien plus que du live coding
1. Edit
3. Debug
2. Test
8. celedev
La vision de celedev
• La Programmation Responsive
• interactivité maximale entre le développeur
1. Edit
3. Debug
et son application
• bien plus que du live coding
• Développer des apps iOS en mode responsive
présente de multiples avantages
• rapidité de prototypage et de mise au point
• libère la créativité à travers l’expérimentation
• bien adaptée à la réalisation d’UX complexes
2. Test
9. celedev
Fonctionnalités
• interactivité poussée entre l’IDE et l’application cible
• tous les éléments constituant l’application peuvent être mis à
jour dynamiquement : code, mais aussi les ressources
images, textes, …
• simplicité d’utilisation
• simplicité des APIs et performance de l’implémentation
• accès complet au SDK iOS
• connexion facile aux devices
• conçu pour s’intégrer très facilement avec le code C /
Objective C et Xcode
▶ It just works.
10. celedev
Composantes du système
3. Env. de développement
3.a. Éditeur de code Lua
Application
Code dynamique (Lua)
Code compilé
3.b. Gest. de ressources
3.c. Moniteur - Debugger
3.d. Gest. d’appareils
2. Bindings iOS
2. Bindings B
1. Env. d'exécution
OS X
OS + SDK iOS
Station de développement
Appareil cible
SDK B
11. celedev
Le choix de Lua
• Un langage de script simple et léger
• créé en 1993 par une équipe de la PUC-Rio
• utilisé dans de nombreux domaines
•
jeux (WoW), web (Wikipedia), scripting (VLC), interface
utilisateur (Adobe Lightroom), embarqué (TI-Nspire), …
• avec de multiples qualités
•
une syntaxe simple, puissante et flexible
•
une machine virtuelle performante et légère
•
conçu pour être embarqué
•
open source
www.lua.org
12. celedev
Lua : exemples de code
-- defines a factorial function
function fact (n)
if n == 0 then
return 1
else
return n * fact(n-1)
end
end
print (fact(10))
-- Tables
local names = {"Peter", "Paul", "Mary"}
local grades = {Mary = 10, Paul = 7, Peter = 8}
-- Embedded function and upvalues
table.sort(names, function (n1, n2)
-- compare the grades
return grades[n1] > grades[n2]
end)
local list = nil
-- insert an element in the list
function insert (v)
list = {next = list, value = v}
end
-- traverse the list
local l = list
while l do
print(l.value)
l = l.next
end
13. celedev
Celedev + Lua: exemple de code
local UIView = require "UIKit.UIView"
local NSText = require "UIKit.NSText"
local UICollectionViewCell = objc.UICollectionViewCell
local Cell = class.createClass ("LabelCell", UICollectionViewCell)
local UIFont = objc.UIFont
local UIColor = objc.UIColor
local function CGRectMake (x, y, width, height)
return { x = x, y = y, width = width, height = height }
end
function Cell:setAppearance (cellIndex, cellCount)
-- ensure that params are not nil
cellIndex, cellCount = cellIndex or 0, cellCount or 1
local contentView = self.contentView
local contentSize = contentView:bounds().size
-- Text label
local label = self.label
end
label.frame = CGRectMake(0, contentSize.height / 4,
contentSize.width, contentSize.height / 2)
label.font = UIFont:boldSystemFontOfSize (46.0)
label.backgroundColor = UIColor.clearColor
label.shadowColor = UIColor.darkGrayColor
label.textColor = UIColor.whiteColor
return cell
14. celedev
Intégration dans l’application
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Create a Lua Context for this application
_collectionLuaContext = [[CIMLuaContext alloc] initWithName:@"Collection Control"];
_collectionLuaContextMonitor = [[CIMLuaRemoteMonitor alloc]
initWithLuaContext:_collectionLuaContext
connectionTimeout:30];
// Create the application window
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.window.backgroundColor = [UIColor underPageBackgroundColor];
// Run the code for this Lua context
[_collectionLuaContext loadLuaModuleNamed:@"CollectionControllerMain"
withCompletionBlock:^(id result) {
if ([result isKindOfClass:[UIViewController class]])
{
self.window.rootViewController = result;
}
}];
[self.window makeKeyAndVisible];
return YES;
}
15. celedev
Démo : live collections
• Un exemple très simple, à
base de Collection Views
• écrite entièrement en Lua
• 3 classes
• view controller
• collection view cell
• collection view layout
• 2 gesture recognizers :
pinch et rotation
16. celedev
Démo : live ressources
• Une app iPhone classique avec une
liste et une vue détaillée
• Le navigation controller est créé par le
MainWindow.xib
• Les autres view controllers sont écrit
en Lua
• L’appli intègre des ressources images,
plist et Interface Builder xib