SproutCore UI is a framework that sits on top of the SproutCore 2.0 framework. It's used to build interactive app-like interfaces easily for the web, with a strong focus on mobile platforms. This talk from the July 2011 SproutCore Meetup highlights the project's goals, architecture, and API. Watch the talk here: http://www.vimeo.com/26454701 Q&A: http://www.vimeo.com/26453952

1. SproutCore UI
App–Like Experiences On The
Web

2. Hi.

3. Goals

4. Design is
difficult

5. Boilerplate
is boring

6. arguments = []
arguments << "--ignore-case"
arguments << "-Q"
arguments << self.searchQuery.stringValue
bundle_path = NSBundle.mainBundle.resourcePath
launch_path = "#{bundle_path}/ack"
ackTask = NSTask.alloc.init
ackTask.setLaunchPath launch_path
ackTask.setCurrentDirectoryPath @projectRoot
ackTask.setArguments arguments
outputPipe = NSPipe.alloc.init
errorPipe = NSPipe.alloc.init
ackTask.setStandardOutput outputPipe
ackTask.setStandardError errorPipe
ackTask.launch
outData = outputPipe.fileHandleForReading.readDataToEndOfFile
errData = errorPipe.fileHandleForReading.readDataToEndOfFile
ackTask.waitUntilExit
status = ackTask.terminationStatus
if status == 0
stdOutput = NSString.alloc.initWithData(outData, encoding:NSUTF8StringEncoding)
process_output stdOutput
elsif status == 1
no_matches
else
ack_error
end

7. arguments <<"--ignore-case"
arguments << "-Q"
arguments << self.searchQuery.stringValue
output = `ack #{arguments.join ‘ ‘}`
process_output output
if ($?) no_matches

8. Focus on
app, not
tools

9. What is it?

10. App-like
experiences

11. Themeability

12. Component
vs
Structural
views

15. Billing Form
Name
Card Number
Submit

16. Structural
=
Chrome

17. Component
=
Interactivity

18. Component Structural
Views Views
Checkbox SplitView
Radio NavigationView
TextField CardView
Slider TabView
Button
Progress
Segmented

19. API

20. {{ui}}

21. {{#ui NavigationView controller="MyApp.navController"}}
<h2>My App</h2>
{{collection MyApp.CollectionView}}
{{/ui}}

22. {{#ui SplitView}}
{{#ui SplitPane}}
<h2>My App</h2>
{{collection MyApp.CollectionView}}
{{/ui}}
{{#ui SplitPane}}
<h2>Main Content</h2>
{{/ui}}
{{/ui}}

23. Component
Views

24. <h2>My App</h2>
{{ui ButtonView title="Submit"}}
{{ui TextField placeholder="Search"}}

25. UI.LayoutManager

26. {{#view MyApp.MyView anchor="top" height="50"}}
<h2>My App</h2>
{{/view}}

27. My App

28. {{#view MyApp.MyView anchor="top" height="50"}}
<h2>My App</h2>
{{/view}}
{{#view MyApp.OtherView}}
<h2>Main Content</h2>
{{/view}}

29. My App
Main Content

30. Gesture
Recognizers

31. MyApp.MyView = SC.View.extend({
pinchStart: function(evt) {
},
pinchChange: function(evt) {
$('#gestureTest').css('-webkit-transform','scale3d('+scale+', '+scale+',1)');
},
pinchEnd: function(evt) {
}
});

32. SC.EventManager

33. Parent View
Target View
SC.EventDispatcher
DOM

34. Parent View
Target View
SC.EventDispatcher
DOM

35. Parent View
Target View
SC.EventDispatcher
DOM

36. Parent View
Target View
SC.EventDispatcher
DOM

37. Parent View
Target View
SC.EventDispatcher
DOM

38. Event Manager
Parent View
Target View
SC.EventDispatcher
DOM

39. Event Manager
Parent View
Target View
SC.EventDispatcher
DOM

40. Event Manager
Parent View
Target View
SC.EventDispatcher
DOM

41. Event Manager
Parent View
Target View
SC.EventDispatcher
DOM

42. Event Manager
Parent View
Target View
SC.EventDispatcher
DOM

43. Event Manager
Parent View
Target View x
SC.EventDispatcher
DOM

44. Where?

45. github.com/sproutcore/
sproutcore-ui

46. pivotaltracker.com/projects/
328313

47. Questions?
Majd Taby
@jtaby
majd@strobecorp.com