SproutCore UI talk at the July SproutCore Meetup

  • 2,319 views
Uploaded on

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 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,319
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
38
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • Prefer declarative over imperative APIs. No boilerplate. Things that takes 10s of lines in Cocoa, are a few lines in SC UI. We can do that because we \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. SproutCore UIApp–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.stringValuebundle_path = NSBundle.mainBundle.resourcePathlaunch_path = "#{bundle_path}/ack"ackTask = NSTask.alloc.initackTask.setLaunchPath launch_pathackTask.setCurrentDirectoryPath @projectRootackTask.setArguments argumentsoutputPipe = NSPipe.alloc.initerrorPipe = NSPipe.alloc.initackTask.setStandardOutput outputPipeackTask.setStandardError errorPipeackTask.launchoutData = outputPipe.fileHandleForReading.readDataToEndOfFileerrData = errorPipe.fileHandleForReading.readDataToEndOfFileackTask.waitUntilExitstatus = ackTask.terminationStatusif status == 0 stdOutput = NSString.alloc.initWithData(outData, encoding:NSUTF8StringEncoding) process_output stdOutputelsif status == 1 no_matcheselse ack_errorend
  • 7. arguments <<"--ignore-case"arguments << "-Q"arguments << self.searchQuery.stringValueoutput = `ack #{arguments.join ‘ ‘}`process_output outputif ($?) no_matches
  • 8. Focus onapp, not tools
  • 9. What is it?
  • 10. App-likeexperiences
  • 11. Themeability
  • 12. Component vs Structural views
  • 13. Billing Form NameCard Number Submit
  • 14. Structural = Chrome
  • 15. Component =Interactivity
  • 16. Component StructuralViews ViewsCheckbox SplitViewRadio NavigationViewTextField CardViewSlider TabViewButtonProgressSegmented
  • 17. API
  • 18. {{ui}}
  • 19. {{#ui NavigationView controller="MyApp.navController"}} <h2>My App</h2> {{collection MyApp.CollectionView}}{{/ui}}
  • 20. {{#ui SplitView}} {{#ui SplitPane}} <h2>My App</h2> {{collection MyApp.CollectionView}} {{/ui}} {{#ui SplitPane}} <h2>Main Content</h2> {{/ui}}{{/ui}}
  • 21. Component Views
  • 22. <h2>My App</h2>{{ui ButtonView title="Submit"}}{{ui TextField placeholder="Search"}}
  • 23. UI.LayoutManager
  • 24. {{#view MyApp.MyView anchor="top" height="50"}} <h2>My App</h2>{{/view}}
  • 25. My App
  • 26. {{#view MyApp.MyView anchor="top" height="50"}} <h2>My App</h2>{{/view}}{{#view MyApp.OtherView}} <h2>Main Content</h2>{{/view}}
  • 27. My AppMain Content
  • 28. GestureRecognizers
  • 29. MyApp.MyView = SC.View.extend({ pinchStart: function(evt) { }, pinchChange: function(evt) { $(#gestureTest).css(-webkit-transform,scale3d(+scale+, +scale+,1)); }, pinchEnd: function(evt) { }});
  • 30. SC.EventManager
  • 31. Parent View Target ViewSC.EventDispatcher DOM
  • 32. Parent View Target ViewSC.EventDispatcher DOM
  • 33. Parent View Target ViewSC.EventDispatcher DOM
  • 34. Parent View Target ViewSC.EventDispatcher DOM
  • 35. Parent ViewTarget View SC.EventDispatcher DOM
  • 36. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • 37. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • 38. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • 39. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • 40. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
  • 41. Event ManagerParent ViewTarget View x SC.EventDispatcher DOM
  • 42. Where?
  • 43. github.com/sproutcore/ sproutcore-ui
  • 44. pivotaltracker.com/projects/ 328313
  • 45. Questions? Majd Taby @jtabymajd@strobecorp.com