Your SlideShare is downloading. ×
0
SproutCore UIApp–Like Experiences On The           Web
Hi.
Goals
Design is difficult
Boilerplate is boring
arguments   = []arguments   << "--ignore-case"arguments   << "-Q"arguments   << self.searchQuery.stringValuebundle_path = ...
arguments <<"--ignore-case"arguments << "-Q"arguments << self.searchQuery.stringValueoutput = `ack #{arguments.join ‘ ‘}`p...
Focus onapp, not  tools
What is it?
App-likeexperiences
Themeability
Component     vs Structural   views
Billing Form      NameCard Number              Submit
Structural    = Chrome
Component      =Interactivity
Component   StructuralViews       ViewsCheckbox    SplitViewRadio       NavigationViewTextField   CardViewSlider      TabV...
API
{{ui}}
{{#ui NavigationView controller="MyApp.navController"}}  <h2>My App</h2>  {{collection MyApp.CollectionView}}{{/ui}}
{{#ui SplitView}} {{#ui SplitPane}}   <h2>My App</h2>   {{collection MyApp.CollectionView}} {{/ui}} {{#ui SplitPane}}   <h...
Component  Views
<h2>My App</h2>{{ui ButtonView title="Submit"}}{{ui TextField placeholder="Search"}}
UI.LayoutManager
{{#view MyApp.MyView anchor="top" height="50"}}  <h2>My App</h2>{{/view}}
My App
{{#view MyApp.MyView anchor="top" height="50"}}  <h2>My App</h2>{{/view}}{{#view MyApp.OtherView}}  <h2>Main Content</h2>{...
My AppMain Content
GestureRecognizers
MyApp.MyView = SC.View.extend({  pinchStart: function(evt) {      },      pinchChange: function(evt) {         $(#gestureT...
SC.EventManager
Parent View   Target ViewSC.EventDispatcher      DOM
Parent View   Target ViewSC.EventDispatcher      DOM
Parent View   Target ViewSC.EventDispatcher      DOM
Parent View   Target ViewSC.EventDispatcher      DOM
Parent ViewTarget View     SC.EventDispatcher              DOM
Event ManagerParent ViewTarget View     SC.EventDispatcher              DOM
Event ManagerParent ViewTarget View     SC.EventDispatcher              DOM
Event ManagerParent ViewTarget View     SC.EventDispatcher              DOM
Event ManagerParent ViewTarget View     SC.EventDispatcher              DOM
Event ManagerParent ViewTarget View     SC.EventDispatcher              DOM
Event ManagerParent ViewTarget View     x     SC.EventDispatcher              DOM
Where?
github.com/sproutcore/     sproutcore-ui
pivotaltracker.com/projects/           328313
Questions?     Majd Taby      @jtabymajd@strobecorp.com
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
Upcoming SlideShare
Loading in...5
×

SproutCore UI talk at the July SproutCore Meetup

2,365

Published 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 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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,365
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

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 of "SproutCore UI talk at the July SproutCore Meetup"

    1. 1. SproutCore UIApp–Like Experiences On The Web
    2. 2. Hi.
    3. 3. Goals
    4. 4. Design is difficult
    5. 5. Boilerplate is boring
    6. 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. 7. arguments <<"--ignore-case"arguments << "-Q"arguments << self.searchQuery.stringValueoutput = `ack #{arguments.join ‘ ‘}`process_output outputif ($?) no_matches
    8. 8. Focus onapp, not tools
    9. 9. What is it?
    10. 10. App-likeexperiences
    11. 11. Themeability
    12. 12. Component vs Structural views
    13. 13. Billing Form NameCard Number Submit
    14. 14. Structural = Chrome
    15. 15. Component =Interactivity
    16. 16. Component StructuralViews ViewsCheckbox SplitViewRadio NavigationViewTextField CardViewSlider TabViewButtonProgressSegmented
    17. 17. API
    18. 18. {{ui}}
    19. 19. {{#ui NavigationView controller="MyApp.navController"}} <h2>My App</h2> {{collection MyApp.CollectionView}}{{/ui}}
    20. 20. {{#ui SplitView}} {{#ui SplitPane}} <h2>My App</h2> {{collection MyApp.CollectionView}} {{/ui}} {{#ui SplitPane}} <h2>Main Content</h2> {{/ui}}{{/ui}}
    21. 21. Component Views
    22. 22. <h2>My App</h2>{{ui ButtonView title="Submit"}}{{ui TextField placeholder="Search"}}
    23. 23. UI.LayoutManager
    24. 24. {{#view MyApp.MyView anchor="top" height="50"}} <h2>My App</h2>{{/view}}
    25. 25. My App
    26. 26. {{#view MyApp.MyView anchor="top" height="50"}} <h2>My App</h2>{{/view}}{{#view MyApp.OtherView}} <h2>Main Content</h2>{{/view}}
    27. 27. My AppMain Content
    28. 28. GestureRecognizers
    29. 29. MyApp.MyView = SC.View.extend({ pinchStart: function(evt) { }, pinchChange: function(evt) { $(#gestureTest).css(-webkit-transform,scale3d(+scale+, +scale+,1)); }, pinchEnd: function(evt) { }});
    30. 30. SC.EventManager
    31. 31. Parent View Target ViewSC.EventDispatcher DOM
    32. 32. Parent View Target ViewSC.EventDispatcher DOM
    33. 33. Parent View Target ViewSC.EventDispatcher DOM
    34. 34. Parent View Target ViewSC.EventDispatcher DOM
    35. 35. Parent ViewTarget View SC.EventDispatcher DOM
    36. 36. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
    37. 37. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
    38. 38. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
    39. 39. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
    40. 40. Event ManagerParent ViewTarget View SC.EventDispatcher DOM
    41. 41. Event ManagerParent ViewTarget View x SC.EventDispatcher DOM
    42. 42. Where?
    43. 43. github.com/sproutcore/ sproutcore-ui
    44. 44. pivotaltracker.com/projects/ 328313
    45. 45. Questions? Majd Taby @jtabymajd@strobecorp.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×