Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

15
Pronounced S-pro-ut-Co-re 1 * Hello everyone! * 2nd Rotterdam.rb meetup. * Before starting with my presentation: - Happy woman’s day to every woman in the room (it is not a sexist thing, I’m just being a gentleman). - Thanks to Finalist IT Group for hosting this meetup and Stefan and Iain for inviting me here tonight. * Disclaimer: - I am still a novice with this technology. - I want to tell you my experience with it so far. - I will not disappoint you, you will see some code!

description

The slides for my SproutCore presentation called "Pronounced S-pro-ut-Co-re" in which I introduce this web client-side framework for cloud applications. It's strong and weak points. Demo some code and apps and why you should keep an eye on it.

Transcript of Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Page 1: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Pronounced S-pro-ut-Co-re

1

* Hello everyone! * 2nd Rotterdam.rb meetup.* Before starting with my presentation:- Happy woman’s day to every woman in the room (it is not a sexist thing, I’m just being a gentleman).- Thanks to Finalist IT Group for hosting this meetup and Stefan and Iain for inviting me here tonight.* Disclaimer: - I am still a novice with this technology.- I want to tell you my experience with it so far.- I will not disappoint you, you will see some code!

Page 2: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Hi! I’m Javier.2

* I’ve been a rocker ever since I can remember.* I’ve spent 7 years studying Software Engineering in Argentina and in France.* I’ve been a working on Software for more than 10 years now.* I’ve just founded Rock & Code (http://rock-n-code.com), a company that aims at providing solutions, integrating Software, and Marketing and Communications.* I’m the current organizer of the Amsterdam.rb Ruby group.* I host 2 radio shows on Internet: “Rock & Roll” and “Hangover”.

Page 3: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Context.3

* Before diving into the core of SproutCore, I would like to briefly touch on the key events that have created the context in which we are living today.* In the beginning, in 1940, there were only Z3, Mark I & II, ENIAC and everything was very simple until 1969 when the ARPANet successfully connected two remote nodes.* The network has change the perception of system architecture forever.* Since that moment, we have been thinking in server-client and distribute architectures: the terminal was born.* Two main revolutions started in the 1980s:+ Computers for the masses:- Microsoft.- Apple.- Open Source & Linux.+ The hunger for data transmission reached a milestone: - In the early 1990s the WWW was created.- Along came the Web Browser.* Recently, another revolution has been underway:+ Clients get smart and connected:- Phone, readers, games and handheld consoles, home appliances have an Internet browser.- An overwhelming amount of data is available on the Internet.* Challenges for developers are to provide (if possible native) Software for multiple platforms.* Solution:- the Web Browser is the common ground.- HTML5 has been taking the Web to another level.* Development platforms: - native applications: Air, Flex, Titanium- cloud applications: SproutCore, Cappuccino

Page 4: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

SproutCore?4

* SproutCore is:- a MVC (Model-View-Controller) web client-side development framework.- for creating fast, native-style cloud applications on the Web Browser.- It does not require to install any plug-in on your Web Browser.- It provides desktop-like features:+ drag and drop.+ undo/redo.+ keyboard shortcuts.+ sophisticated user interfaces.+ text and image localization.+ rich internal data model.- It eliminates “glue” code:= Properties: stores a state such as “firstName”, “isEnabled” of a button or even a computable property.= Observers: method that will be called when a property changes.= Bindings: this concept is borrowed from the Cocoa framework whereby the properties of two objects can be bound together so that whenever one binding changes, the other one will change as well. It is a way to hook up models, views, and controllers and this makes an application easier to maintain.+ These are working together in order to store the state of every property within an application and also they relay any change to the pieces of the code when a particular event happens.- support for Unit Testing.- support for IE6+, Opera9+, FF2+, Safari3+, Chrome, others.- suitable for both on-line and off-line applications.- It is Open Source.

Page 5: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Separation.

5

* It allows the seamless separation between the front-end and the back-end.* Out-of-the-box support for RESTful back-ends that accept and deliver JSON-formatted data:- Ruby on Rails.- Sinatra.- Django.- Node.js.- CouchDB.- PHP.- ASP.Net.- Etc.* It interacts with any HTTP application server at runtime via XHR calls:- Ruby on Rails.- Tomcat.- WebObjects.- WebDav.

Page 6: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

User Interface.6

* Beautiful interfaces for desktop-like applications on the Web Browser.* Demo of the sample-controls.

Page 7: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

It is not Java.

script

7

* Applications are Web standard HTML, CSS and Javascript.* With the exception of the templates (HTML written in ERB), every part of your application should be written in Javascript and each should use the SC class hierarchy.* Have a set of tools, which are written in Ruby, are directly influenced by Rails, and adopt Javascript best practices.

Page 8: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Generators.8

* They help the development by modularizing the pieces that can be combined automatically.* Generate completely or partially a standard application directory.* It is possible to create the following modules:- app.- controller.- data-source.- design.- framework.- language.- model.- page.- project.- test.- theme.- view.* Command line: - sc-init <app>- sc-gen <type> <class>

Page 9: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Server.9

* Development server for application testing written in Ruby and EventMachine.* Command line: sc-server

Page 10: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Build Tools.10

* Applications are deployed as a static directory of files that is easy to serve and it has no dynamic server-side code whatsoever.* The files are combined, packed, minimized, and they are cache-friendly.* Static content is the fastest way to serve content on the Web and your application can use the caching servers and other high-volume distribution networks to its advantage.* Command line: sc-build <app>

Page 11: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

sudo gem install sproutcore11

* To install SproutCore in your development machine, you just need to write this line into your command line.* This gem works in both v1.8.7 and v1.9.1 of the Ruby interpreter. (It works!)* The SproutCore gem performs better under Ruby 1.9.1.

Page 12: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Integration.

12

* Now, let’s see some code!

Page 13: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Conclusions.13

* SproutCore has just reached v1.0.* Great technology for fast (off/on)line desktop-like cloud applications supported by the Web Browsers.* MVC philosophy is wide-spread so it is easy to understand and adopt.* Easier maintenance due to the Properties-Observers-Bindings relationship.* An active Open Source project.* Support for any RESTful back-ends that accept and deliver JSON-formatted data.* Nice user interface.* You are not required to learn another Programming Language.* Great generators, server, and build tools written in Ruby.* There are still some rough edges to polish.* Lack of updated documentation and illustrative examples.* No graphic interface designer for applications.

Page 14: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

Questions?14

* Now the most important part of the presentation!* Does anybody have any question? :)

Page 15: Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

• http://sproutcore.com

• http://wiki.sproutcore.com

• http://docs.sproutcore.com

• http://github.com/sproutit/sproutcore

• http://groups.google.com/group/sproutcore

• #sproutcore on irc.freenode.net

15

* If you are interested in SproutCore, then check these links out!