Let your applications look good, use a design framework

This was a new session that I presented with Mark Myers, Mark Leusink and Martin Vereecken.

As a developer you can't get away anymore with an application that just works: your users expect it to look great too. Luckily there are many frameworks available to help you. In this session we will talk about some of the leading contenders such as Bootstrap, Kendo UI, jQuery Mobile, Blueprint, 960 grids, show some demos and then open up the floor to have a discussion... What are the pros and cons of every framework, how do you pick one, and why not just use the standard options that IBM offer?

Transcript

1. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! LET YOUR 
 APPLICATIONS
 LOOK GOOD
 USE A
 DESIGN FRAMEWORK" 1 !
2. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 01.1 WHAT ABOUT?" As a developer you can't get away anymore with an application that just works: your users expect it to look great too. Luckily there are many frameworks available to help you. In this session we will talk about some of the leading contenders such as Bootstrap, Kendo UI, jQuery Mobile, Blueprint, 960 grids, show some demos and then open up the floor to have a discussion... What are the pros and cons of every framework, how do you pick one, and why not just use the standard options that IBM offers?! Freedom of choice! 2 !
3. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 01.2 AGENDA" 3 !
4. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 4 !
5. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 02. THE FOUR M’S" Choice of m&m’s is loosely based on framework characteristics they speak about, not on the actual person* *Except for the Dutch Mark Leusink, who insisted on being the orange one 5 !
6. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 02.1 THE FOUR M’S" Who we are! §  Consultant with London Developer Co-op! §  Lead Developer with Elguji Software! §  XPages developer since 2008! §  Mobile web developer - Unplugged! MATT WHITE" §  Thrown in the Notes Client in 1996! §  Sees the web side of things since 2000! §  Suffering in XPaging since 2011 ! §  OpenNTF: Viewnify, Refresh Divine! §  http://www.bizzybee.be! MARTIN VEREECKEN" 6 !
7. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 02.2 THE FOUR M’S" Who we are! MARK MYERS" §  Freelance consultant/developer! §  Domino/Notes since previous millennium! §  Web apps! §  XPages! §  Mobile: TeamStudio Unplugged! §  Dutch! §  OpenNTF: XPage Debug Toolbar,
 Auto-Logins! MARK LEUSINK" 7 ! §  Consultant with London Developer Co-op! §  Fixing Collaboration, infrastructure and security issues in big companies for the last 14 years! §  Barely Human, allowed out sometimes to present at conferences and scare small children! §  http://www.stickfight.co.uk!
8. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 8 !
9. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 03.1 WHY DESIGN MATTERS" Because you don’t want your applications to look like this! 9 !
10. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 03.2 WHY DESIGN MATTERS" 10 ! §  Users don't care about what the application does, they do care about how it looks and feels! §  Consistent UI makes applications easier to use! !
11. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 11 !
12. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 04. WHAT ARE DESIGN FRAMEWORKS" 12 ! §  A design framework is usually made up of a package of CSS, sometimes JavaScript! §  It aims to do the heavy lifting of page layout and cross browser support for you! §  Domino has a built in framework: OneUI! §  But we're not limited to the defaults…! !
13. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 13 !
14. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 05.1 WHY USE OTHER FRAMEWORKS" 14 ! To understand why we want to look at alternative frameworks, we have to look at OneUI first!
15. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 05.2 ONEUI" §  A collection of CSS styles and JavaScript (Dojo) to standardize the look and feel of XPages applications! §  A tight fit with the Extension Library and SSJS:! §  Many UI controls from the Extension Library rely on the OneUI CSS classes! §  Makes it harder (but not impossible) to use those controls with other frameworks! WHAT:" §  Professional, business look! §  And comes in lots of colors! §  Required CSS/JS files are already on your server! §  Good to easily start with a complete layout in XPages! §  Out of the box already feature rich! §  Nice integration with Domino Designer! THE GOOD:" §  Difficult to customize! §  A bit like "missionary position": the first time is amazing, but it gets boring after a while ;-)! §  Not responsive! though that is coming eventually! §  Look at the source!! THE BAD:" 15 !
16. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 05.3 WHY USE OTHER FRAMEWORKS" 16 ! §  Easier to adjust! §  More diversity in look and feel! §  Simple source, use of divs for layout! §  More UI controls/plugins available! §  Responsive!
17. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 17 !
18. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 06.1 ADDING FRAMEWORKS TO DOMINO" 18 ! §  Import the CSS/JS files into the files resources of your NSF
 OR
 Drag & drop to WebContent folder via Package Explorer
 OR
 Add them to your "classic" form designs! §  Then you can reference them as resources in your XPages!
19. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 06.2 ADDING FRAMEWORKS TO DOMINO" 19 ! §  You may need/want to disable OneUI! Create a new theme for your application and remove the "extends" property: it will stop loading extra Dojo css-files! §  If you really want to be brave, disable Dojo as well! Edit xsp.properties: xsp.client.script.libraries=none! §  Beware that server interaction (e.g. view pagers) will no longer work! §  If you disable OneUI or Dojo then it's likely that you won't be able to use the Extension Library!
20. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 20 !
21. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 07.1 YUI" § http://yuilibrary.com/! § Probably the first large scale framework! § Still easy to use and widely supported! § The current version of IdeaJam uses it! WHAT:" 21 ! Matt White!
22. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 07.2 BLUEPRINT" §  http://www.blueprintcss.org/! §  A widely used framework in 2009/10! §  Still works well for laying out desktop websites but should be considered legacy now! §  Not updated recently (since May 2011)! §  We used it for IQJam:
 http://iqjam.net! §  Good example of a top framework becoming redundant! WHAT:" 22 !
23. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Matt White! 07.3 960 GRIDS - UNSEMANTIC" § 960 Grids is another grid framework which offers no other UI elements! § Styling of the UI is down to you or your designers! § Also not responsive, but Unsemantic by the same team has taken over that role! WHAT:" 23 !
24. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 07.4 BOOTSTRAP" 24 ! 24 !
25. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Martin Vereecken! 07.5 BOOTSTRAP" §  The current darling of the Internet! §  Started as an internal project at Twitter! §  Open source since August 2011! §  Starting point: http://twitter.github.com/ bootstrap/index.html! WHAT:" §  Easy to use! §  Well documented! §  Frequently updated! §  Responsive! §  Integrates with jQuery so lots of plugins! §  Customization and themes! §  Extensions/plugins (date picker, value pickers)! §  Lots of internet resources! THE GOOD:" §  Will it suffer the same fate as Blueprint?! §  Default controls (e.g. date picker) don't look so good anymore if you use Bootstrap! You need to develop XPage version of Bootstrap plugins! §  Some trial and error to integrate in Xpages! I'm currently creating a list of XPage controls that play well with XPages! §  A bit of a challenge to create your own theme! But lots of tools to help! THE BAD:" 25 ! 25 !
26. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 07.6 BOOTSTRAP CUSTOMIZED" 26 ! 26 ! Martin Vereecken!
27. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 07.7 BOOTSTRAP RESOURCES" §  Bootswatch (free)! §  WrapBootstrap
 (small fee, gorgeous)! THEMES:" §  Jetstrap! §  Divshot! §  StyleBootstrap! §  BootTheme! §  Bootstrap Designer (Innovastudio)! BUILDERS:" §  Bootstrap! §  W3Resource! §  Lynda.com! TUTORIALS:" 27 ! 27 ! SNIPPETS, BUTTON CREATORS, PROTOTYPING,... " Martin Vereecken!
28. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 07.8 KENDO UI" 28 ! 28 ! §  http://www.kendoui.com! §  Based on jQuery! §  Half way between a single function library and a full framework! §  Split up into 4 products! §  UI Web - Lots of Widgets for the Web! §  UI Mobile - Native looking Web apps for Mobile! §  UI DataViz - Graph Frenzy! §  Server Wrappers - API Wrappers for when you are not using Domino! §  Feels like you are using Adobe Flex but this time it won’t become legacy in 2 years! WHAT:" §  Doesn’t fall into the "you must use me" trap of most frameworks! §  It's not free - guaranteed support and updates ! §  The Mobile component looks VERY native on iOS, Android, BB and Windows phone! §  Easy to plug-in to existing servers including Domino! §  Supports back to IE7! THE GOOD:" §  Eeek! - its not free! §  If you choose the free version it's GPL-3.0! §  As it not a full framework, it does not provide the guidance that is sometimes required in the corporate world! §  It is with one company! THE BAD:"
29. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 07.9 KENDO UI" 29 ! 29 ! Many widgets, not just the usual suspects!
30. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 07.10 KENDO UI Mobile" 30 ! 30 ! Looking native everywhere! Mark Myers!
31. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 07.11 JQUERY UI" 31 ! 31 !
32. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 07.12 JQUERY UI" §  Built on top of jQuery! §  Very complete set of controls, widgets, animations, draggables, ...! § Check  out   h*p://xomino.com  for   examples  (by  Mark  Roden)   WHAT:" §  Easy to customize! Themes can be downloaded! If you didn't like that grey look! THE GOOD:" 32 ! 32 !
33. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Leusink! 07.13 JQUERY MOBILE" § Mobile controls framework built on top of jQuery! WHAT:" § Easy to get started with in XPages! § Very active community and used a lot for mobile web apps/websites! THE GOOD:" 33 ! 33 !
34. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 07.14 JQUERY MOBILE" §  Uses HTML5 data-xxx attributes! §  Add in XPages using the "attrs" property! §  By default, page navigation is done using AJAX:! §  All links are replaced by AJAX calls! §  Click on a link (AJAX) loads the page and updates the DOM! §  But doesn't execute inline JavaScript! §  Which means that doesn't play well with XPages! §  Can be disabled completely, but impacts performance! §  Check performance with your targeted data size! GOOD TO KNOW:" 34 ! 34 ! Mark Leusink!
35. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 35 !
36. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 08.1 HOW TO CHOOSE A FRAMEWORK" 36 ! §  What devices are you supporting?! §  Just IE?! §  Chrome / Safari / Firefox?! §  Mobile?! §  Is development time important?! §  No time? Use OneUI with the Extension Library controls! §  Do you have a design team?! §  Bootstrap is very easy to extend! §  Let a designer create a theme for your company! §  Are you happy with Dojo or do you want to use jQuery?! !
37. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group Mark Myers! 08.2 IS THAT ALL??" 37 ! §  Our overview is by no means complete! §  There are a lot of other frameworks out there! §  Sencha Touch, ExtJS, MooTools! But...! §  Currently only a couple of complete, widely used and active projects! §  Who still remembers script.aculo.us?!
38. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group
39. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 39 !
40. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group 09. DISCUSSION - QUESTIONS" 40 ! §  Know other great frameworks?! §  Ever used <fill in framework name>?! §  Experiences?! §  Anything else you'd like to share?! (related to design frameworks)!
41. Matt White | Martin Vereecken | Mark Myers | Mark Leusink! BLUG Benelux Lotus User Group THANK YOU 
 FOR COMING
 AND SEE
 YOU SOON" 41 !