Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    4 Favorites

    Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator - Presentation Transcript

    1. AJAX WORLD March 2008
    2. Jeff Haynie Co-founder & CEO [email_address] blog.jeffhaynie.us twitter.com/jhaynie linkedin.com/in/jhaynie
    3. how did we get here?
    4. 1991
    5. Dave Litwack Mitchell Kertzman
    6. Powersoft
    7. Powerbuilder
    8. client / server
    9. proprietary
    10. rapid app dev
    11. database integration
    12. $5.2M (6 months from 1.0)
    13. Profitable: year one
    14. IPO Feb. 1993 (~3 years)
    15. $57M 1993
    16. suits came knocking
    17.  
    18. $900M - 1995
    19. Oops (sybase fabricated sales figures)
    20. revolutionized the way we built apps
    21. focus on the app (and ultimately, our business requirements)
    22.  
    23. 1991
    24. Comdex (Atlanta)
    25.  
    26.  
    27. client / server
    28. easy to build apps
    29. event driven
    30. integration to DB
    31. last release: 1996 (vb6)
    32.  
    33. March 31, 2005 (extended to March 2008 - better hurry up and replace)
    34. focus on the app
    35. 2-tier architecture
    36. client = application
      • rapid app creation
      • productivity
      • ease of use
    37. distribution
    38. security
    39. programming model
    40. client/server was proliferating, something else was happening
    41. 1989
    42.  
    43. tim berners-lee
    44. CERN (europe)
    45. world wide web
    46. www
    47. web
    48. hyper text transfer protocol
    49. http
    50. http://www.example.com (if you don’t know this you’re in the wrong presentation)
    51. directory (browsing)
    52. sharing content (research)
    53. primary display was text
    54. network of connected computers
    55. killer app = information
    56. 1992
    57.  
    58. marc andreessen
    59. student at univ of illinois
    60. mosaic “web browser”
    61.  
    62.  
    63. 1994
    64.  
    65. Mosaic Communications Corporation
    66. Netscape Communications
    67. Netscape Communicator
    68.  
    69. IPO 1995
    70. browser wars (1995)
    71. massive adoption
    72. web sites were slow internet was slow
    73. almost all initial web sites were content-based
    74. the “web” initially competed with consumer info services like AOL, Compuserve and Prodigy
    75. primarily still web content you “browsed”
    76.  
    77. distributed free (brilliant and bold move)
    78. bundled win95 (plus! pack)
    79. (isn’t it great being a monopoly?)
    80. based on spyglass mosaic (remember Netscape?)
    81. MASSIVE ADOPTION
    82. January 1998
    83. mozilla open source
    84. (kick butt release party)
    85.  
    86. microsoft had 2 primary killer advantages:
    87. Operating System platform
    88. Developer Community
    89. May 1998
    90. DOJ ruled MSFT violated anti-trust
    91. (too late, game was pretty much over)
    92. November 1998
    93. $4.2 BILLION
    94.  
    95. web browser changed the way we think about apps
    96. distribution of apps
    97. programming model
    98. development of software
    99. web 1.0
    100. three-tier architecture
    101. server is the brain
    102. client is for display (doesn’t that sound like the mainframe architecture?)
    103. the way we built apps changed based on “the web”
    104. common gateway interface (CGI)
    105. netscape API (nsapi)
    106. web servers
    107. app servers
    108. database servers
    109. caching servers
    110. web pages
    111. web apps
    112. massive new way of thinking about the web and apps (a lot was fueled by dot.com bubble)
    113. 1995
    114.  
    115. James Gosling
    116.  
    117. Java
    118. Write once, Run anywhere
    119. Browser
    120. Applets
    121. Java Web Start (some years later after applets failed)
    122. slow
    123. big
    124. UI differences
    125. web app?
    126. native app? (sure didn’t look like one)
    127. programming model
    128. browser plugin
    129. java language was great!
    130. but … apparent java would not be deployed in browser environment
    131. java did change the way we built web sites (and it still continues today)
    132. why the web?
    133. web programming model
    134. distributed
    135. easy to program
    136. UI simple to layout
    137. cross-browser differences
    138. open source emerging rapidly with Internet
    139. standards-based
    140. 1994
    141.  
    142. tim berners-lee (remember, he created the web?)
    143. preserve, promote web standards
    144. “ ensure compatibility among vendors”
    145. (are we there yet?)
    146. HTML
    147. CSS
    148. XML
    149. DOM
    150. CGI
    151. VoiceXML / CCXML
    152. (too many more to list)
    153. HTML 1.0 – 1993 (IETF WD)
    154. HTML 2.0 – 1995 (IETF RFC)
    155. HTML 3.0/3.2 (W3C)
    156. HTML 4.0 (1997)
    157. (XHTML came along the way)
    158. HTML 5.0 (Jan 2008 - WD) 11 years!
    159. Client-side data storage
    160. video
    161. cross document messaging
    162. remoting
    163. (continuing to expand idea of what a web app is)
    164. XHTML or HTML?
    165. most innovation has been on the server
    166. servlets
    167. JSP pages
    168. ASP pages
    169. tag libaries
    170. PHP pages
    171. (and lots of embedded sql)
    172. cold fusion (so many other great server-side web frameworks)
    173. server-driven UI
    174. model-view-controller (MVC)
    175. (server-assisted MVC)
    176. server generates UI
    177. UI is a template page
    178. same HTML (almost always)
    179. not very environmentally friendly 
    180. age of server-side infrastructure
    181. application servers
    182. “ middleware”
    183. new app complexities on the server side
    184. cache business objects
    185. cache page templates
    186. cache SQL queries
    187. session state
    188. stored application state
    189. (we used to call it application state)
    190. session clustering
    191. sticky sessions (optimize load balancing)
    192. clustering not linear
    193. middleware wars
    194. hundreds of app servers
    195. lots of server-side frameworks
    196. lots of big companies rolled their own initially
    197. IBM
    198. Sun
    199. BEA (weblogic)
    200. organized around J2EE specification
    201. community-based (Sun JCP)
    202. heavy weight
    203. overly complex
    204. too many specs to keep up with
    205. widely adopted
    206. clustering
    207. fail-over
    208. high-availability
    209. Microsoft .NET
    210. wasn’t J2EE (not necessarily a bad thing)
    211. wasn’t even java (of course not)
    212. 2000 – Microsoft C# (feels a lot like Java)
    213. part of Microsoft .NET
    214. web-programming model
    215. (for Microsoft platform)
    216. 1999
    217.  
    218. (not flavor flav)
    219.  
    220. (marc fleury)
    221. JBoss
    222. Java application server (and eventually J2EE)
    223. FREE! (well, almost)
    224. open source
    225. J2EE programming model (and it almost made J2EE fun)
    226. 2001 (JBoss, LLC)
    227. innovation primarily driven by server-side infrastructure
    228. apps not much different (1999)
    229. server-assisted MVC
    230. service oriented architecture
    231. middleware = SOA
    232. service federations
    233. distributed registries
    234. service composition
    235. service orchestration
    236. portals
    237. ESB
    238. $60B Market (at least they say it was)
    239. But business applications still function the same
    240. Jesse James Garrett “AJAX” 2005
    241. Microsoft & Netscape
    242. early inter-applet techniques
    243. applets to slow to start
    244. IE5 – MSFT created XHR
    245. Microsoft Outlook Web (Microsoft was innovating!)
    246. Web 1.5
    247. MVC + Ajax
    248. round peg square hole
    249. page driven paradigm with async behavior
    250. look Ma – no page refresh
    251. cool, but. . .
    252. it’s only “pimp my web 1.0”
    253.  
    254. but lots of startups and innovative web companies thinking big
    255. web 2.0
    256. starting to think about apps again
    257. networks are faster
    258. hardware is cheap
    259. software is moving to open source
    260. and everyone is wired and on the web
    261. user experience
    262.  
    263.  
    264. richer apps
    265. dynamic info
    266. web is the platform
    267.  
    268.  
    269.  
    270. (you can do that?)
    271.  
    272.  
    273.  
    274. (my enterprise apps need that)
    275. (but, how?)
      • different solutions
      (we’re innovating again)
    276. different approaches (and some feel like déjà vu)
    277. Sun doing something similar as before (as best we can tell)
    278.  
    279. (yawn…)
    280. MSFT doing something similar as before (it’s great being on top)
    281.  
    282. (surprise!)
    283. Adobe has an innovative approach that leverages Flash
    284.  
    285. wonderful product
    286. open source (kind of)
    287. “ Web 2.0” is overloaded
    288. Web 2.0 = rich client
    289. rich client = client programming
    290. rich client != UI code in server
    291. okay, but how?
    292. Javascript
    293. (and lots of it)
    294. simple login form example
    295. <html> <head> <title>Simple Ajax Login Example</title> <script language=&quot;Javascript&quot;> function xmlhttpPost(strURL) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send(getquerystring()); } function getquerystring() { var form = document.forms['f1']; var username = form.username.value; var password = form.password.value; qstr = ‘username=' + escape(username) + ‘&password=‘ + password; return qstr; } function updatepage(str){ document.getElementById(&quot;result&quot;).innerHTML = str; } </script> </head> <body> <form name=&quot;f1&quot;> <p>username: </p> <input name=”username&quot; type=&quot;text”/> <p>password: </p> <input name=”password&quot; type=&quot;text”/> <input value=”login&quot; type=&quot;button&quot; onclick='JavaScript:xmlhttpPost(&quot;/cgi-bin/simple-ajax-example.cgi&quot;)'></p> <div id=&quot;result&quot;></div> </form> </body> </html>
    296. (Yikes!!!)
    297. 25+ lines of Javascript
    298. for one simple login form
    299. rich client = mountains of JS?
    300. mountains of JS = nightmare
    301. (crap. now what?)
    302. open standards + open source (to the rescue)
    303. Javascript libraries
    304. and lots of them
      • widget libraries
      • Ajax libraries
      • effect libraries
    305. (here’s just a few)
    306. Prototype
    307. Scriptaculous
    308. JQuery
    309. Dojo
    310. ExtJS
    311. Yahoo YUI
    312. Mootools
    313. Open Rico
    314. Qooxdoo
    315. MochiKit
    316. Lightbox
    317. Greybox
    318. Lightbox Plus
    319. Nifty Corners
    320. (okay to breathe)
    321. (you get the point)
    322. all great libraries!
    323. how do I keep up with them all?
    324. multiple versions, bug fixes
    325. integration issues, glue code namespace issues
    326. (but I thought that was the platform vendor’s job!)
    327. with chaos comes opportunity
      • open standards
      • open source (the entire bits)
      • open developer community
      • integrated RIA programming model (HTML, CSS and Javascript)
    328. what does that mean?
    329. well, what does an RIA programmer do?
    330. event handling, Ajax, DHTML
    331. (Got it!)
    332. login form revisited
    333. <html> <head> <title>Hello World 2.0</title> <script src=&quot;javascripts/appcelerator.js&quot; type=&quot;text/javascript&quot;></script> </head> <body> <div on=“r:login.request then show or r:login.response then hide” style=“display:none”> <img src=“images/indicator.gif” /> processing login… </div> Username: <input type=“text id=“username” fieldset=“login”/> Password: <input type=“password id=“password fieldset=“login”/> <input type=“button” value=“login” fieldset=“login” on=“click then r:login.request” /> </body> </html>
    334. on=“r:login.request then show”
    335. (what is that?)
    336. event handling + Ajax + DHTML one simple expression language
    337. it’s an integrated RIA programming model
    338. that leverages standards (like HTML, CSS and Javascript)
    339. it codes Javascript so you don’t have to
    340. (Web Expression Language)
    341. cool, but what about widgets?
    342. (good question)
      • I want to be able to create new widgets
      • leverage all of the great existing widgets
      • I want one single integrated way to use them ALL
    343.  
    344. how about this:
    345. <!– ExtJS Grid --> <app:ext_grid on=&quot;l:show.user.response then execute&quot; property=&quot;rows&quot; width=&quot;390&quot; title=”Users”> <column property=”first” >First Name</column> <column property=”last”>Last Name</column> <column property=”phone”>Phone</column> </app:ext_grid> <!– Yahoo Calendar --> <app:calendar on=&quot;l:show.calendar then execute&quot; title=”My Calendar&quot; inputId=”date”> </app:calendar> <input type=“text” id=“date”/> <img src=“images/calendar.png” on=“click then l:show.calendar”/>
    346. ExtJS and YUI in one widget framework?
    347. (yes, and any others you want)
    348. including Flex widgets!
    349. (and you can easily create your own)
    350.  
    351. okay, calm down Sally
    352. let’s recap
    353. Web Expression Language + Unified Widget Framework + Open Standards + Open Source =
    354. fully integrated RIA platform
    355.  
    356. RIA is good but what about my services?
    357. (and that $60B investment in SOA?)
    358. you want to mix your RIA with your SOA
    359. RIA + SOA
    360. full decoupling of the rich client from its services
    361. they share only one thing
    362. a lightweight message contract (aren’t they services?)
    363. (need a picture?)
    364. Rich Client Service r:login.request {‘username’:’joe’, ‘password’:’****’} r:login.response {‘success’:true}
    365. Contract = message name
    366. login.request and login.response
    367. plus input and output data
    368. (that’s it!)
    369. if the contract is message-based
    370. why does the service programming language matter?
    371. good question.
    372. (it doesn’t)
    373. with a message-based contract you can create services in any programming language!
    374. we call these SOA Integration Points
    375. and we have them for Java, Ruby, PHP, .NET, Python and Perl
    376. how does that work?
    377. let’s look at Java
    378. take a plain Java object (POJO)
    379. and add a single annotation
    380. @Service(request = ”my.request&quot;, response = ”my.response&quot;)
    381. to a Java method – like so:
    382. package org.appcelerator.service; import org.appcelerator.annotation.Service; import org.appcelerator.messaging.Message; public class MyService { @Service(request = ”my.request&quot;, response = ”my.response&quot;) protected void myRequest(Message request, Message response) throws Exception { // service logic here } }
    383. (that’s it!) really….
    384. each SOA Integration Point
      • service routing
      • data marshalling
    385. (what does that mean?)
    386. it means you can place a native object or array of objects into the response
    387. and we’ll take care of the rest.
    388. the result is:
    389. you focus on what you do best: BUILD APPLICATIONS!
    390. instead of playing the role of platform vendor
    391. that’s our job!
    392.  
    393. we are the RIA + SOA company
    394. RIA + SOA – that’s good but what about prototyping?
    395. (glad you asked)
    396. remember our message-based contract?
    397. it enables location independence for services
    398. meaning mock services can reside in the RIA
    399. meaning you can build fully functional RIA prototypes
    400. without a single line of service code (or even web server)
    401. with 100% reusability!
    402. we call them Interactive Use Cases
    403. build your application while you build your requirements
    404. no more server-focused development
    405. no more 100-page requirements documents (that never matches the end application)
    406. it’s technology-enabled Agile development
      • quick iterations
      • fully functional (at every point)
      • makes it easy to gather feedback from key stakeholders
    407. product managers
    408. service developers
    409. documentation team
    410. QA
    411. sales team
    412. and even customers
    413. after incorporating feedback
    414. you have two key deliverables:
      • fully functional RIA prototype (100% reusable)
    415. 2. fully defined message contracts
    416. (makes service development and integration a snap)
    417.  
    418. fully integrated RIA+SOA platform
    419. an entirely new and better way to build the next generation of web applications
    420. help us build the best RIA+SOA open source developer community www.appcelerator.org
    421.  

    + Jeff HaynieJeff Haynie, 2 years ago

    custom

    5795 views, 4 favs, 9 embeds more stats

    This was my opening keynote presentation for Ajaxwo more

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 5795
      • 5559 on SlideShare
      • 236 from embeds
    • Comments 0
    • Favorites 4
    • Downloads 102
    Most viewed embeds
    • 147 views on http://www.appcelerant.com
    • 73 views on http://blog.jeffhaynie.us
    • 6 views on http://mangolingo.blogspot.com
    • 4 views on http://localhost
    • 2 views on http://127.0.0.1:81

    more

    All embeds
    • 147 views on http://www.appcelerant.com
    • 73 views on http://blog.jeffhaynie.us
    • 6 views on http://mangolingo.blogspot.com
    • 4 views on http://localhost
    • 2 views on http://127.0.0.1:81
    • 1 views on http://tag.portblogs.com
    • 1 views on http://feeds.feedburner.com
    • 1 views on http://praneetmokkapati.blogspot.com
    • 1 views on http://radiant.stormventures.com.s19693.gridserver.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories