Your SlideShare is downloading. ×
0
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
SproutCore UI talk at the  July SproutCore Meetup
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SproutCore UI talk at the July SproutCore Meetup

2,357

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 …

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,357
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

    ×