Palestra sobre o framework JavaScriptCore apresentada no FloripaJS Meetup em Joinville

1. JavaScriptCore
André Gustavo Espeiorin

2. /me
• Developer desde 2006
• iOS Developer desde 2010
• Desenvolvimento Nativo
• Desenvolvedor independente
• http://about.me/espeiorin

3. Singapore Airlines
iOS App

4. Por que?
• Nem tudo precisa ser nativo
• JavaScript #1
• Acelerar o desenvolvimento
• Flexibilidade

5. JavaScriptCore
• WebKit Framework
• iOS 7+ / OS X Mavericks
• http://opensource.apple.com/source/
JavaScriptCore

6. JavaScriptCore
• Acessar contexto JS dentro da WebView
• Executar JS a partir de código nativo
• Executar código nativo a partir do JS
• Capturar exceções JS

7. JSContext
• Ambiente JS
• Análogo ao objeto window

8. JSContext
JSContext *context = [[JSContext alloc] init];
[context evaluateScript:@"var a = 5”];
[context evaluateScript:@"var b = 4"];
[context evaluateScript:@"var sum = function(valueA, valueB) { return valueA + valueB }"];
JSValue *tripleNum = [context evaluateScript:@"sum(a, b)"];

9. Exceptions
// debug
[context setExceptionHandler:^(JSContext *context, JSValue *value) {
NSLog(@"JS Exception %@", value);
}];

10. JSValue
• Variáveis JS
• Funções JS
• Possui uma referência para o JSContext

11. JSValue
Foundation JavaScript
nil undefined
NSNull null
NSNumber number, boolean
NSDictionary Object object
NSArray Array object
NSDate Date object
NSBlock Function object
id Wraper object
Class Constructor object

12. JSValue
JSValue *tripleNum = [context evaluateScript:@"sum(a, b)”];
// Converte Valor Numérico
NSLog(@"SUM %@", [tripleNum toNumber]);
// Converte para string
self.title = [[context evaluateScript:@"document.title"] toString];
// Invoca função vinda do JS
JSValue *sumFunction = context[@"sum"];
JSValue *result = [sumFunction callWithArguments:@[@5, @4]];
NSLog(@"SUM %d", [result toInt32]);

13. JSExport
• Protocol deve ser extendido
• Conversão de objetos JS <> Objective-C

14. JSExport
@import JavaScriptCore;
@protocol Contact <JSExport>
@property (nonatomic, strong) NSString *name;
@property (nonatomic, strong) NSString *company;
@property (nonatomic, strong) NSString *phone;
+ (instancetype) contactWithName:(NSString *)name
company:(NSString *)company
phone:(NSString *)phone;
@end

15. Injeção de Valores
Objective-C
context[@"contactManager"] = self.contactManager;
context[@"Contact"] = [DefaultContact class];
JavaScript
var contact = Contact.contactWithNameCompanyPhone(name, company, phone);
if (!contactManager.addContact(contact)) {
alert('Erro ao inserir contato, verifique os dados inseridos.');
return false;
}

16. Exemplo
https://github.com/espeiorin/JavaScriptCore

17. Perguntas?

18. Obrigado