SlideShare uma empresa Scribd logo

Blug2013 frameworks

•
•
Mark Myers
Mark Myers
1 de 41
Baixar para ler offline
1! BLUG LET YOUR 
 Benelux Lotus User Group APPLICATIONS
 LOOK GOOD
 USE A
 DESIGN FRAMEWORK" Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
2! BLUG 01.1 WHAT ABOUT?" As a developer you can't get away anymore with an application that just works: your users expect it Benelux Lotus User Group 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! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
3! BLUG 01.2 AGENDA" Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
4! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
5! BLUG 02. THE FOUR M’S" Choice of m&m’s is loosely based on framework characteristics they speak about, not on the actual person* Benelux Lotus User Group *Except for the Dutch Mark Leusink, who insisted on being the orange one Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
6! BLUG 02.1 THE FOUR M’S" Who we are! Benelux Lotus User Group MATT WHITE" MARTIN VEREECKEN" §  Consultant with London Developer §  Thrown in the Notes Client in 1996! Co-op! §  Sees the web side of things since §  Lead Developer with Elguji Software! 2000! §  XPages developer since 2008! §  Suffering in XPaging since 2011 ! §  Mobile web developer - Unplugged! §  OpenNTF: Viewnify, Refresh Divine! §  http://www.bizzybee.be! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
7! BLUG 02.2 THE FOUR M’S" Who we are! Benelux Lotus User Group MARK MYERS" MARK LEUSINK" §  Consultant with London Developer Co-op! §  Freelance consultant/developer! §  Fixing Collaboration, infrastructure and §  Domino/Notes since previous millennium! security issues in big companies for the last §  Web apps! 14 years! §  XPages! §  Barely Human, allowed out sometimes to §  Mobile: TeamStudio Unplugged! present at conferences and scare small §  Dutch! children! §  OpenNTF: XPage Debug Toolbar,
 §  http://www.stickfight.co.uk! Auto-Logins! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
8! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
9! BLUG 03.1 WHY DESIGN MATTERS" Because you don’t want your applications to look like this! Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
10 ! BLUG 03.2 WHY DESIGN MATTERS" Benelux Lotus User Group §  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! ! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
11 ! BLUG Benelux Lotus User Group Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
12 ! BLUG 04. WHAT ARE DESIGN FRAMEWORKS" Benelux Lotus User Group §  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…! ! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
13 ! BLUG Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
14 ! BLUG 05.1 WHY USE OTHER FRAMEWORKS" To understand why we want to look at alternative frameworks, we have to look at OneUI first! Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
15 ! BLUG 05.2 ONEUI" WHAT:" §  A collection of CSS styles and JavaScript (Dojo) to standardize the look and feel of XPages applications! Benelux Lotus User Group §  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! THE GOOD:" §  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 BAD:" §  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!! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
16 ! BLUG 05.3 WHY USE OTHER FRAMEWORKS" Benelux Lotus User Group §  Easier to adjust! §  More diversity in look and feel! §  Simple source, use of divs for layout! §  More UI controls/plugins available! §  Responsive! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
17 ! BLUG Benelux Lotus User Group Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
18 ! BLUG 06.1 ADDING FRAMEWORKS TO DOMINO" Benelux Lotus User Group §  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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
19 ! BLUG 06.2 ADDING FRAMEWORKS TO DOMINO" Benelux Lotus User Group §  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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
20 ! BLUG Benelux Lotus User Group Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
21 ! BLUG 07.1 YUI" Benelux Lotus User Group WHAT:" § http://yuilibrary.com/! § Probably the first large scale framework! § Still easy to use and widely supported! § The current version of IdeaJam uses it! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
22 ! BLUG 07.2 BLUEPRINT" Benelux Lotus User Group WHAT:" §  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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
23 ! BLUG 07.3 960 GRIDS - UNSEMANTIC" Benelux Lotus User Group WHAT:" § 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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
24 ! BLUG 07.4 BOOTSTRAP" Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
25 ! BLUG 07.5 BOOTSTRAP" WHAT:" §  The current darling of the Internet! §  Started as an internal project at Twitter! Benelux Lotus User Group §  Open source since August 2011! §  Starting point: http://twitter.github.com/ bootstrap/index.html! THE GOOD:" §  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 BAD:" §  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! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
26 ! BLUG 07.6 BOOTSTRAP CUSTOMIZED" Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
27 ! BLUG 07.7 BOOTSTRAP RESOURCES" THEMES:" Benelux Lotus User Group §  Bootswatch (free)! §  WrapBootstrap
 (small fee, gorgeous)! BUILDERS:" §  Jetstrap! §  Divshot! §  StyleBootstrap! §  BootTheme! §  Bootstrap Designer (Innovastudio)! TUTORIALS:" §  Bootstrap! §  W3Resource! §  Lynda.com! SNIPPETS, BUTTON CREATORS, PROTOTYPING,... " Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
28 ! BLUG 07.8 KENDO UI" WHAT:" §  http://www.kendoui.com! §  Based on jQuery! §  Half way between a single function library Benelux Lotus User Group 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! THE GOOD:" §  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 BAD:" §  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! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
29 ! BLUG 07.9 KENDO UI" Many widgets, not just the usual suspects! Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
30 ! BLUG 07.10 KENDO UI Mobile" Looking native everywhere! Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
31 ! BLUG 07.11 JQUERY UI" Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
32 ! BLUG 07.12 JQUERY UI" Benelux Lotus User Group WHAT:" §  Built on top of jQuery! §  Very complete set of controls, widgets, animations, draggables, ...! § Check  out   h*p://xomino.com  for   examples  (by  Mark  Roden)   THE GOOD:" §  Easy to customize! Themes can be downloaded! If you didn't like that grey look! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
33 ! BLUG 07.13 JQUERY MOBILE" Benelux Lotus User Group WHAT:" § Mobile controls framework built on top of jQuery! THE GOOD:" § Easy to get started with in XPages! § Very active community and used a lot for mobile web apps/websites! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
34 ! BLUG 07.14 JQUERY MOBILE" GOOD TO KNOW:" Benelux Lotus User Group §  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! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
35 ! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
36 ! BLUG 08.1 HOW TO CHOOSE A FRAMEWORK" Benelux Lotus User Group §  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?! ! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
37 ! BLUG 08.2 IS THAT ALL??" Benelux Lotus User Group §  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?! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
39 ! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
40 ! BLUG 09. DISCUSSION - QUESTIONS" Benelux Lotus User Group §  Know other great frameworks?! §  Ever used <fill in framework name>?! §  Experiences?! §  Anything else you'd like to share?! (related to design frameworks)! Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
41 ! BLUG Benelux Lotus User Group THANK YOU 
 FOR COMING
 AND SEE
 YOU SOON" Matt White | Martin Vereecken | Mark Myers | Mark Leusink!

Recomendados

Web Content Management Is Dead Long Live Web Content Management
Web Content Management Is Dead Long Live Web Content ManagementWeb Content Management Is Dead Long Live Web Content Management
Web Content Management Is Dead Long Live Web Content ManagementThe Content Advisory
 
Stop (de)bugging me!
Stop (de)bugging me!Stop (de)bugging me!
Stop (de)bugging me!Mark Leusink
 
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularEscaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularMark Leusink
 
Engage 2017 - Choose your own adventure
Engage 2017 - Choose your own adventureEngage 2017 - Choose your own adventure
Engage 2017 - Choose your own adventureMark Myers
 
LDC Via building a new app
LDC Via building a new appLDC Via building a new app
LDC Via building a new appMark Myers
 
Saleforce For Domino Dogs
Saleforce For Domino DogsSaleforce For Domino Dogs
Saleforce For Domino DogsMark Myers
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 serversMark Myers
 
Uklug 2014 connections dev faq
Uklug 2014 connections dev faqUklug 2014 connections dev faq
Uklug 2014 connections dev faqMark Myers
 

Recomendados

Web Content Management Is Dead Long Live Web Content Management
Web Content Management Is Dead Long Live Web Content ManagementWeb Content Management Is Dead Long Live Web Content Management
Web Content Management Is Dead Long Live Web Content ManagementThe Content Advisory
 
Stop (de)bugging me!
Stop (de)bugging me!Stop (de)bugging me!
Stop (de)bugging me!Mark Leusink
 
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularEscaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularMark Leusink
 
Engage 2017 - Choose your own adventure
Engage 2017 - Choose your own adventureEngage 2017 - Choose your own adventure
Engage 2017 - Choose your own adventureMark Myers
 
LDC Via building a new app
LDC Via building a new appLDC Via building a new app
LDC Via building a new appMark Myers
 
Saleforce For Domino Dogs
Saleforce For Domino DogsSaleforce For Domino Dogs
Saleforce For Domino DogsMark Myers
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 serversMark Myers
 
Uklug 2014 connections dev faq
Uklug 2014 connections dev faqUklug 2014 connections dev faq
Uklug 2014 connections dev faqMark Myers
 
Vertical vs Horizontal Scaling
Vertical vs Horizontal Scaling Vertical vs Horizontal Scaling
Vertical vs Horizontal Scaling Mark Myers
 
SHOW104: Practical Java
SHOW104: Practical JavaSHOW104: Practical Java
SHOW104: Practical JavaMark Myers
 
Proper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino DevelopersProper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino DevelopersMark Myers
 
The Dev-Admin Chimera: Customising Connections (with Gab Davis)
The Dev-Admin Chimera: Customising Connections (with Gab Davis)The Dev-Admin Chimera: Customising Connections (with Gab Davis)
The Dev-Admin Chimera: Customising Connections (with Gab Davis)Mark Myers
 
Ar*@!+$es to this. getting IBM connections to do what you want
Ar*@!+$es to this. getting IBM connections to do what you want Ar*@!+$es to this. getting IBM connections to do what you want
Ar*@!+$es to this. getting IBM connections to do what you want Mark Myers
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasureMark Myers
 
BP203 limitless languages
BP203 limitless languagesBP203 limitless languages
BP203 limitless languagesMark Myers
 

Mais conteúdo relacionado

Mais de Mark Myers

Vertical vs Horizontal Scaling
Vertical vs Horizontal Scaling Vertical vs Horizontal Scaling
Vertical vs Horizontal Scaling Mark Myers
 
SHOW104: Practical Java
SHOW104: Practical JavaSHOW104: Practical Java
SHOW104: Practical JavaMark Myers
 
Proper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino DevelopersProper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino DevelopersMark Myers
 
The Dev-Admin Chimera: Customising Connections (with Gab Davis)
The Dev-Admin Chimera: Customising Connections (with Gab Davis)The Dev-Admin Chimera: Customising Connections (with Gab Davis)
The Dev-Admin Chimera: Customising Connections (with Gab Davis)Mark Myers
 
Ar*@!+$es to this. getting IBM connections to do what you want
Ar*@!+$es to this. getting IBM connections to do what you want Ar*@!+$es to this. getting IBM connections to do what you want
Ar*@!+$es to this. getting IBM connections to do what you want Mark Myers
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasureMark Myers
 
BP203 limitless languages
BP203 limitless languagesBP203 limitless languages
BP203 limitless languagesMark Myers
 

Mais de Mark Myers (7)

Vertical vs Horizontal Scaling
Vertical vs Horizontal Scaling Vertical vs Horizontal Scaling
Vertical vs Horizontal Scaling
 
SHOW104: Practical Java
SHOW104: Practical JavaSHOW104: Practical Java
SHOW104: Practical Java
 
Proper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino DevelopersProper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino Developers
 
The Dev-Admin Chimera: Customising Connections (with Gab Davis)
The Dev-Admin Chimera: Customising Connections (with Gab Davis)The Dev-Admin Chimera: Customising Connections (with Gab Davis)
The Dev-Admin Chimera: Customising Connections (with Gab Davis)
 
Ar*@!+$es to this. getting IBM connections to do what you want
Ar*@!+$es to this. getting IBM connections to do what you want Ar*@!+$es to this. getting IBM connections to do what you want
Ar*@!+$es to this. getting IBM connections to do what you want
 
Show104 buried treasure
Show104 buried treasureShow104 buried treasure
Show104 buried treasure
 
BP203 limitless languages
BP203 limitless languagesBP203 limitless languages
BP203 limitless languages
 

Blug2013 frameworks

  • 1. 1! BLUG LET YOUR 
 Benelux Lotus User Group APPLICATIONS
 LOOK GOOD
 USE A
 DESIGN FRAMEWORK" Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 2. 2! BLUG 01.1 WHAT ABOUT?" As a developer you can't get away anymore with an application that just works: your users expect it Benelux Lotus User Group 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! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 3. 3! BLUG 01.2 AGENDA" Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 4. 4! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 5. 5! BLUG 02. THE FOUR M’S" Choice of m&m’s is loosely based on framework characteristics they speak about, not on the actual person* Benelux Lotus User Group *Except for the Dutch Mark Leusink, who insisted on being the orange one Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 6. 6! BLUG 02.1 THE FOUR M’S" Who we are! Benelux Lotus User Group MATT WHITE" MARTIN VEREECKEN" §  Consultant with London Developer §  Thrown in the Notes Client in 1996! Co-op! §  Sees the web side of things since §  Lead Developer with Elguji Software! 2000! §  XPages developer since 2008! §  Suffering in XPaging since 2011 ! §  Mobile web developer - Unplugged! §  OpenNTF: Viewnify, Refresh Divine! §  http://www.bizzybee.be! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 7. 7! BLUG 02.2 THE FOUR M’S" Who we are! Benelux Lotus User Group MARK MYERS" MARK LEUSINK" §  Consultant with London Developer Co-op! §  Freelance consultant/developer! §  Fixing Collaboration, infrastructure and §  Domino/Notes since previous millennium! security issues in big companies for the last §  Web apps! 14 years! §  XPages! §  Barely Human, allowed out sometimes to §  Mobile: TeamStudio Unplugged! present at conferences and scare small §  Dutch! children! §  OpenNTF: XPage Debug Toolbar,
 §  http://www.stickfight.co.uk! Auto-Logins! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 8. 8! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 9. 9! BLUG 03.1 WHY DESIGN MATTERS" Because you don’t want your applications to look like this! Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 10. 10 ! BLUG 03.2 WHY DESIGN MATTERS" Benelux Lotus User Group §  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! ! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 11. 11 ! BLUG Benelux Lotus User Group Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 12. 12 ! BLUG 04. WHAT ARE DESIGN FRAMEWORKS" Benelux Lotus User Group §  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…! ! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 13. 13 ! BLUG Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 14. 14 ! BLUG 05.1 WHY USE OTHER FRAMEWORKS" To understand why we want to look at alternative frameworks, we have to look at OneUI first! Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 15. 15 ! BLUG 05.2 ONEUI" WHAT:" §  A collection of CSS styles and JavaScript (Dojo) to standardize the look and feel of XPages applications! Benelux Lotus User Group §  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! THE GOOD:" §  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 BAD:" §  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!! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 16. 16 ! BLUG 05.3 WHY USE OTHER FRAMEWORKS" Benelux Lotus User Group §  Easier to adjust! §  More diversity in look and feel! §  Simple source, use of divs for layout! §  More UI controls/plugins available! §  Responsive! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 17. 17 ! BLUG Benelux Lotus User Group Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 18. 18 ! BLUG 06.1 ADDING FRAMEWORKS TO DOMINO" Benelux Lotus User Group §  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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 19. 19 ! BLUG 06.2 ADDING FRAMEWORKS TO DOMINO" Benelux Lotus User Group §  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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 20. 20 ! BLUG Benelux Lotus User Group Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 21. 21 ! BLUG 07.1 YUI" Benelux Lotus User Group WHAT:" § http://yuilibrary.com/! § Probably the first large scale framework! § Still easy to use and widely supported! § The current version of IdeaJam uses it! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 22. 22 ! BLUG 07.2 BLUEPRINT" Benelux Lotus User Group WHAT:" §  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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 23. 23 ! BLUG 07.3 960 GRIDS - UNSEMANTIC" Benelux Lotus User Group WHAT:" § 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! Matt White! White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 24. 24 ! BLUG 07.4 BOOTSTRAP" Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 25. 25 ! BLUG 07.5 BOOTSTRAP" WHAT:" §  The current darling of the Internet! §  Started as an internal project at Twitter! Benelux Lotus User Group §  Open source since August 2011! §  Starting point: http://twitter.github.com/ bootstrap/index.html! THE GOOD:" §  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 BAD:" §  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! Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 26. 26 ! BLUG 07.6 BOOTSTRAP CUSTOMIZED" Benelux Lotus User Group Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 27. 27 ! BLUG 07.7 BOOTSTRAP RESOURCES" THEMES:" Benelux Lotus User Group §  Bootswatch (free)! §  WrapBootstrap
 (small fee, gorgeous)! BUILDERS:" §  Jetstrap! §  Divshot! §  StyleBootstrap! §  BootTheme! §  Bootstrap Designer (Innovastudio)! TUTORIALS:" §  Bootstrap! §  W3Resource! §  Lynda.com! SNIPPETS, BUTTON CREATORS, PROTOTYPING,... " Matt White | Martin Vereecken! Vereecken | Mark Myers | Mark Leusink!
  • 28. 28 ! BLUG 07.8 KENDO UI" WHAT:" §  http://www.kendoui.com! §  Based on jQuery! §  Half way between a single function library Benelux Lotus User Group 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! THE GOOD:" §  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 BAD:" §  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! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 29. 29 ! BLUG 07.9 KENDO UI" Many widgets, not just the usual suspects! Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 30. 30 ! BLUG 07.10 KENDO UI Mobile" Looking native everywhere! Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 31. 31 ! BLUG 07.11 JQUERY UI" Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 32. 32 ! BLUG 07.12 JQUERY UI" Benelux Lotus User Group WHAT:" §  Built on top of jQuery! §  Very complete set of controls, widgets, animations, draggables, ...! § Check  out   h*p://xomino.com  for   examples  (by  Mark  Roden)   THE GOOD:" §  Easy to customize! Themes can be downloaded! If you didn't like that grey look! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 33. 33 ! BLUG 07.13 JQUERY MOBILE" Benelux Lotus User Group WHAT:" § Mobile controls framework built on top of jQuery! THE GOOD:" § Easy to get started with in XPages! § Very active community and used a lot for mobile web apps/websites! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 34. 34 ! BLUG 07.14 JQUERY MOBILE" GOOD TO KNOW:" Benelux Lotus User Group §  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! Matt White | Martin Vereecken | Mark Myers | Mark Leusink! Mark Leusink!
  • 35. 35 ! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 36. 36 ! BLUG 08.1 HOW TO CHOOSE A FRAMEWORK" Benelux Lotus User Group §  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?! ! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 37. 37 ! BLUG 08.2 IS THAT ALL??" Benelux Lotus User Group §  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?! Matt White | Martin Vereecken | Mark Myers Myers! | Mark Leusink!
  • 38. BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 39. 39 ! BLUG Benelux Lotus User Group Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 40. 40 ! BLUG 09. DISCUSSION - QUESTIONS" Benelux Lotus User Group §  Know other great frameworks?! §  Ever used <fill in framework name>?! §  Experiences?! §  Anything else you'd like to share?! (related to design frameworks)! Matt White | Martin Vereecken | Mark Myers | Mark Leusink!
  • 41. 41 ! BLUG Benelux Lotus User Group THANK YOU 
 FOR COMING
 AND SEE
 YOU SOON" Matt White | Martin Vereecken | Mark Myers | Mark Leusink!