Mike Subelsky of OtherInbox.com discusses the SproutCore JavaScript framework for building desktop web applications that run inside the browser.

2. 2.0

3. 3F
2.0

4. Future of Web Apps
Fast, fluid, and feature-rich

5. Future of Web Apps
Less web, more app

6. Future of Web Apps
Probably client-server

7. Future of Web Apps
Web-native, no plugins

8. Future of Web Apps
Open source

9. Building 3F Apps
with SproutCore
Mike Subelsky
OtherInbox.com
IgniteBaltimore.com

11. Use SproutCore to build web clients
that feel like desktop apps

12. Use whatever you want
to build the server

13. Not a competitor or replacement
of jQuery, Prototype, etc.

15. Not a competitor or
replacement
of jQuery, Prototype, etc.

16. Why client-server?

17. Users Want More

23. Impossible with
“traditional” web 2.0
techniques

24. remove_messages: function(message_ids,block) {
OtherInbox.undo_stack.push(new UndoAction(message_ids,Mailbox.current_id,block))
$('undo').writeAttribute('disabled',null)
var affected_mailboxes = $H()
var highest_position = null
var msg_count = 0
message_ids.each(function(id) {
$('msg_row_' + id).remove()
var msg = Message.instances.unset(id)
var position = Message.ordered_instance_keys.indexOf(Number(id))
Message.ordered_instance_keys.splice(position,1)
if ((highest_position == null) || (highest_position < position))
highest_position = position
msg_count++
})
Mailbox.update_message_count(msg_count)

27. 3F Means You Need
Client-Server

28. OI.executeAjax('/refresh', {
method: 'get',
parameters: parameters,
onSuccess: function(transport) {
OI._parseRefresh(transport);
}
});
removeMessages: function(msgs) {
SC.Store.destroyRecords(msgs);
};

29. class RefreshController < ApplicationController
before_filter :signin_required
def index
render :text => JSON.generate(Refresher.new(params).to_hash)
end
end

30. {quot;recordTypesquot;:[quot;Mailboxquot;,quot;Userquot;,quot;Folderquot;],
quot;deletedquot;:{},
quot;flashquot;:[],
quot;changedquot;:{
quot;Userquot;:
[{quot;namequot;:quot;forfunquot;,quot;preferencesquot;:null,quot;guidquot;:
3,quot;typequot;:quot;Userquot;,quot;adminquot;:true,quot;invitationsRemaining
quot;:1,quot;loginquot;:quot;testuserquot;,quot;statequot;:quot;completedquot;}],
quot;createdquot;:
{quot;Mailboxquot; [{quot;namequot;:quot;Freeslidequot;,quot;unreadCountquot;:null
,quot;guidquot;:quot;12quot;,quot;folderquot;:quot;3quot;,quot;priorityquot;:quot;2quot;,quot;typequot;:
quot;Mailboxquot;}]}}
}

33. sh
Fla
t
ip
S cr
va
Ja
CSS
L
HTM

34. 3F Means You Need
To Think Like a
Desktop Developer

36. Kill me now

37. “...writing an app in
Javascript on the web is
akin to writing C on the
desktop: it is just one
level above the 'bare
metal’.”
- Charles Jolley

38. SproutCore does 80%
(just like Rails)

39. Feels a bit like Rails

40. Feels a bit like Rails
Convention over configuration

41. Feels a bit like Rails
Configuring components

42. Feels a bit like Rails
Uses Ruby helpers and ERB or Haml

43. Except totally
different

44. Except totally
different
Inspired by Cocoa

45. Except totally
different
More functionally-oriented (little or no state)

46. Except totally
different
Everything is a binding

47. Except totally
different
Trust but verify
if (foo && foo.get(‘importantValue’))

48. Except totally
different
By all means, repeat yourself

49. Except totally
different
JavaScript is awesome
(just avoid the bad parts)

50. Except totally
different
MVC !== MVC

51. What does it look like?

53. sc-config
clients

54. sc-config
c[:build_mode] = :production
c[:minify_javascript] = :production
c[:combine_javascript] = :production
c[:combine_stylesheets] = :production
c[:include_fixtures] = :development

55. clients

56. Models

57. Models
require('core');
require('models/record');
OI.Mailbox = OI.Record.extend({
dataSource: SC.Store,
_messages: null,
isLoading: false,
init: function() { this._messages = { value: [] }; },
lowerCaseName: function() {
var name = this.get('name');
if (name) { return name.toLowerCase(); }
}.property('name'),

58. Models Build commands
require('core');
require('models/record');
OI.Mailbox = OI.Record.extend({
dataSource: SC.Store,
_messages: null,
isLoading: false,
init: function() { this._messages = { value: [] }; },
lowerCaseName: function() {
var name = this.get('name');
if (name) { return name.toLowerCase(); }
}.property('name'),

59. Models Build commands
require('core');
require('models/record');
OI.Mailbox = OI.Record.extend({
dataSource: SC.Store,
_messages: null,
isLoading: false,
init: function() { this._messages = { value: [] }; },
lowerCaseName: function() {
var name = this.get('name');
if (name) { return name.toLowerCase(); }
}.property('name'),
Computed property

60. Controllers

61. Controllers

62. Controllers
Observer

63. Views

64. Views

65. Tests
SproutCore has good built-in testing

66. Tests

67. Tests

68. english.lproj

69. english.lproj

70. english.lproj
ERB Goodness

71. main.js

72. main.js

73. main.js
Timer awesomeness

74. What gets downloaded?
javascript.js*
stylesheet.css
index.html
images (sprite for bonus)
All can be cached

75. SC generates these files on the fly
in development mode
Served by Merb

76. SC builds these files as static
assets in production mode
Served by Apache,Varnish, CDN, etc.
Rails-style asset tags

77. Demo

78. Other Topics
Learning curve
The Uberfunction
Should you use it?
Build system
Other frameworks

79. Join our team
Upgrade your job Open Positions
• Smart, fun people • Ruby on Rails Developer
• Startup environment • Ruby on Rails Intern
• Cutting edge tech
• Competitive pay
• Stock options
We pay $1,000 for successful referrals!

80. Thank you!
mike@otherinbox.com
subelsky.com - ignitebaltimore.com
@subelsky @ignitebaltimore