CocoaHeads Rennes #14: Programmation Responsive par Celedev

www.celedev.com

cele

dev Programmation Responsive

Une nouvelle façon de développer pour iOS

Jean-Luc JumpertzOctobre 2013

CocoaHeads Rennes #14

cele

dev

Évolution des apps iOS

2008

cele

dev

É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

cele

dev

É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

UIKit DynamicsSprite Kit

Core Animation

Game Kit

Auto Layout

Text Kit

cele

dev

É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

▶ une meilleure expérienceutilisateur (UX)

▶ des Apps plus complexes

▶ des développements plus longs

2013

2013

cele

dev

Outils de développement• 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

4. Run

5. Setup

6. Test

7. D

ebug

cele

dev

La vision de celedev

• La Programmation Responsive

• interactivité maximale entre le développeur et son application

• bien plus que du live coding

1. Edit

2. Test

3. Debug

cele

dev

La vision de celedev

• La Programmation Responsive

• interactivité maximale entre le développeur 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

1. Edit

2. Test

3. Debug

cele

dev

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.

cele

dev

Composantes du système

Application

Appareil cible

OS + SDK iOS

1. Env. d'exécution

2. Bindings iOS

SDK B

2. Bindings B

Code dynamique (Lua) Code compilé

Station de développement

OS X

3. Env. de développement 3.a. Éditeur de code Lua

3.c. Moniteur - Debugger

3.d. Gest. d’appareils

3.b. Gest. de ressources

cele

dev

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 sourcewww.lua.org

cele

dev

Lua : exemples de code-- defines a factorial functionfunction fact (n) if n == 0 then return 1 else return n * fact(n-1) endend

print (fact(10))

-- Tableslocal names = {"Peter", "Paul", "Mary"}local grades = {Mary = 10, Paul = 7, Peter = 8}

-- Embedded function and upvaluestable.sort(names, function (n1, n2) -- compare the grades return grades[n1] > grades[n2] end)

local list = nil

-- insert an element in the listfunction insert (v) list = {next = list, value = v}end

-- traverse the listlocal l = list while l do print(l.value) l = l.next end

cele

dev

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.UIFontlocal 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 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.whiteColorend

return cell

cele

dev

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

cele

dev

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

cele

dev

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

cele

dev

En conclusion

• Disponible à la fin de l’année

• Recherche beta-testeurs !

• Pour rester informé

• www.celedev.com

• @celedev