1. SharePoint Saturday DC: 12/05/09 Presented by: Will Lawrence and the jPoint Team jPoint: A jQuery Based Library for creating Web 2.0 Apps in SharePoint Intro

2. Agenda Web 2.0 App: Demo jPoint: Unleashed jParts: Plug and Play Web Parts jParts: Live Demo

3. Old Aviation Event Reporting Process 1.Crash recorded by hand 2.Faxed to HQ in Washington and “processed” 3.Executives and special persons notified by voice 4.Event reports and verbal notifications recorded in spreadsheet and filed Demo: Quick Background

4. Improved Event Reporting Process 1.Crash entered into SharePoint 2.Washington HQ “processes” event from Dashboard 3.Executives and special persons notified by voice 4.Verbal notifications recorded online in a SP list What functionality is in the Dashboard in Step 2? What happens in Step 4? Answers: Watch the demo

5. Design Dilemma HQ client wants new event reporting process implemented quickly HQ client wants fancy features Design –A lot of details have been left out, but it essentially comes down to one question SharePoint Designer or Visual Studio?

6. Visual Studio vs SharePoint Designer Tradeoffs

7. jPoint Boost SP Development

8. Activities that are difficult …without jPoint –Manipulate New/Disp/Edit form fields and their custom counterparts, dataViewWebParts –Access SharePoint data from client side –Build Web 2.0 and AJAX features quickly Demo Preview Features –Drag and Drop –Form field expandos –Date/Time/Timezone jQuery plugin in form –Auto save –Live lists as queues –Flexigrid jQuery plugin connected to SP data –Live collaboration

9. Video / Demo Time Web 2.0 App: DemoDemo http://www.sharejpoint.com/Shared%20Documents/SPSDemo/SPSDemo.swf jPoint: Unleashed jParts: Plug and Play Web Parts jPoint API: Deep Dive

10. Activities made difficult without jPoint –Manipulate New/Disp/Edit form fields and their custom counterparts, dataViewWebParts –Access SharePoint data on the client –Build Web 2.0 and AJAX features quickly Demo Review Features –Drag and Drop –Form field expandos –Date/Time/Timezone jQuery plugin in form –Auto save –Live lists as queues –Flexigrid jQuery plugin connected to SP data –Live collaboration

11. Client Side Script Solutions Why? To fill the value gap, increase ROI, and provide a visually stimulating, rich UX. Rapid prototyping and agile development lead to successful and sustainable solutions. Mashups and composite applications bring more value to the user. What? JavaScript –jQuery –jQuery UI and plugins –jPoint API / SharePoint data layer Web part deployment jParts –“jQuery plugins” for SP –User modifiable options Cloud Services –Charts (Google API) –Maps (Google, Bing)

12. Content needs to be marked up early, easily, and often to prevent garbage and lackluster participation Business process integration into SharePoint needed to familiarize users with tools before successful business process improvement. Value gap should be filled for better ROI (it seems obvious, but is sometimes a hard fight) Need to show WIIFM (What’s In It For Me?) to gain user adoption UI Customizations and stimulating UX help to comfort and empower users The value traditionally seen from SharePoint What is required by the business need The value gap Improve metadata input Integrate existing processes Smart customization Content Management Collaboration Search

13. jPoint Web 2.0 App: Demo jPoint: Unleashed jParts: Plug and Play Web Parts jPoint API: Deep Dive

14. jQuery is Hot Topic for SharePoint –I saw it being mentioned 3 times at this summer’s Regional SharePoint Conference. –I saw it being mentioned 6 or more times and jQuery was used in live demos in at least 3 presentations at the SharePoint Conference 2009 in Vegas. Below are my live blog posts from the demos using jQuery. SharePoint Designer 2010 – Building Composite Apps: From SPC09 Las Vegas SharePoint Designer 2010 – Building Composite Apps: From SPC09 Las Vegas Enterprise Mashups with SharePoint Designer 2010, Bing map services, and Restful web services: From SPC09 Las VegasEnterprise Mashups with SharePoint Designer 2010, Bing map services, and Restful web services: From SPC09 Las Vegas Working with the new Client Object Model: From SPC09 Las VegasWorking with the new Client Object Model: From SPC09 Las Vegas

15. jPoint: Unleashed jQuery chosen as JavaScript library of choice for SharePoint client side projects. Collection of scripts turns into a library and is named, jPoint. Research completed and determined community could use a comprehensive, cross-browser solution. The jPoint Project is born. sharejPoint non-profit organization started. Origins 6/13/08 4/3/09 8/22/09 8/28/09

16. Reasons and Motivation behind jPoint Project Client side code stored in content DB is easier to maintain than server side code for multiple front-end web servers in multiple server farms (due to austere regional replication) Need for cross- browser compatibility 3 rd party paid web part solutions –Bundled packages too expensive –Licensing headaches –I do not like being charged for a web part that I can re-create in less than 45 minutes Need for comprehensive JavaScript library

17. Quick Mental Image Multiple server farm for regional replication

18. jPoint: Unleashed Erucy's SPJSLibSPJSLib Darren Johnson’s Cross Browser JavaScript API Cross Browser JavaScript API Marc Anderson’s SPServices SPServices Paul Grenier & Jan Tielens many blog articles Microsoft’s Mike Ammerlaan and J.R. Arredondo for their positive feedback and encouragement Tom Brauch and the great people at FPWeb for providing free (as in beer) hosting for sharejPoint. FPWeb sharejPoint jPoint Thanks! Inspiration Download from Codeplex Codeplex The many great bloggers in the community

19. Old and New Models New! Model, developers: –Do not need to be SharePoint and JavaScript Jedi Masters –Write re-usable code that is cross-browser compatible –Rely on (or help) community to update jPoint open source code –Use jPoint API that works with 2007 and SharePoint 2010 Old Model, developers: –Need to know underlying SharePoint details –Hard code scripts that work for one page, one browser –Use borrowed code from multiple sites that is hard to maintain SharePoint jPoint Plugins jPart Solution jQuery User Options SharePoint Borrowed Scripts Form Fields Web Services Custom Script Solution jQuery

20. jPoint: Components jPointLoader.js –Dynamically loads jQuery and jPoint –Parameter passing to override default paths Example: – jPoint.js –Contains main jPoint class. –jP is to jPoint as $ is to jQuery

21. jPointLoader

22. jParts Web 2.0 App: Demo jPoint: Unleashed jParts: Plug and Play Web Parts jPoint API: Deep Dive

23. jParts: Scripts as Web Parts

24. jPart Template

25. Live Demo Time Web 2.0 App: Demo jPoint: Unleashed jParts: Plug and Play Web Parts jParts: Live DemoDemo

26. A sliding scale of solution sophistication Different tools for different roles No-code solutions Declarative solutions, some code Sophisticated enterprise applications Visual Studio SharePoint Designer Office Browser Larger team development ALM Enterprise application integration Across the firewall integration Web services and components Manageability Declarative integration to external data Relatively sophisticated workflows Rich forms-based applications Web design Some VS-based (WF activities, web parts) BU reporting, tracking Access DBs User customized sites Ad-hoc solutions Browser-based SharePoint data definition Using galleries of web parts Enable Highest sophistication Highest empowerment

27. Thank you Remember to: –Share jPoint. It’s open source. –Checkout http://jPoint.codeplex.com and supporting site http://sharejPoint.com.http://jPoint.codeplex.comhttp://sharejPoint.com Contact me at : –will.lawrence@sharejPoint.comwill.lawrence@sharejPoint.com –Twitter: @willhlaw Looking for: –Sponsors to support sharejPoint organization –Developers to constantly improve the project