Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Five Killer Tricks to Make Your Java Web App Look Awesome

Five Killer Tricks to Make Your Java Web App Look Awesome

Java developers are often frustrated with the results they get when trying to design web apps. In the words of Java Champion Bruno Souza, “we always do ugly things... always.” In this session learn a five-step lesson on how to get from a blank page to a fully responsive, mobile-first, accessible dashboard ready to use on enterprise applications. And discover how to apply it on your existing Java web codebase. The session also covers how to use Bootstrap, the world’s most popular front-end component library, and explores Patternfly, a Bootstrap-based UI framework for enterprise web applications. Come away understanding how to connect to your legacy Java back-end frustration-free, giving your web app an instant facelift that your customers will love.

Andres Galante

October 01, 2017
Tweet

More Decks by Andres Galante

Other Decks in Technology

Transcript

  1. 5 killer tricks to make your Java webapp look awesome.

    Scott Wierschem and Andrés Galante
  2. “I have a hard time with alignment.” Bazlur Rahman, JUG

    leader “What frustrates me is the time I spend to get the layout the way I'd like it to be.” Gustavo Muniz do Carmo, Java Developer
  3. Top Ten Worst Things That Could Happen In Life (According

    to the Internetz) https://www.thetoptens.com/worst-things-could-happen-life/
  4. AGENDA • 5 practical tricks to make your app look

    great • How to use Bootstrap • How to build a Dashboard with PatternFly • How to integrate it on legacy Java apps
  5. The 5 user research steps even you can do! 1.

    Find a user 2. Give them a task to do 3. Watch them use your product 4. Have a discussion UNDERSTAND YOUR USER’S NEEDS 1
  6. The world's most popular front-end component library to build responsive,

    mobile-first projects on the web. getbootstrap.com CREATE GREAT CONTENT 2
  7. Internet Explorer 9.0 0.96% Internet Explorer 10.0 0.72% Color blind

    ~9% BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3
  8. The web is accessible by default! If your website is

    not accessible, it’s your fault. BUILD ACCESSIBLE, RESPONSIVE, AND PERFORMANT UIs 3
  9. ESTABLISH A MAINTAINABLE ARCHITECTURE 4 CSS is like a bear

    cub. Cute and inoffensive but as he grows, he'll eat you alive.
  10. Let each thing be the thing. And not an extension

    of another thing. ESTABLISH A MAINTAINABLE ARCHITECTURE 4
  11. https://www.nngroup.com/articles/top-10-mistakes-web-design/ “...when things always behave the same, users don't have

    to worry about what will happen. Instead, they know what will happen based on earlier experiences” Jakob Nielsen KEEP CONSISTENCY 5
  12. CREATE VARIABLES FOR KEEP CONSISTENCY 5 • Shadows • Borders

    • Animations • Spaces • Typography • Colors
  13. DESIGN TIPS • Use just one Font family. • Choose

    one primary and one accent color. • Follow the KISS rule. (Keep It Simple Stupid) KEEP CONSISTENCY 5
  14. Understand your user’s needs Create great content Build accessible, responsive,

    and performant UIs Establish a maintainable architecture Keep Consistency 1 2 3 4 5
  15. Data tables Awesome fonts Bootstrap select Date pickers C3 charts

    Cards Dashboards Bootstrap Spin Bootstrap Touchspin Google Code Prettify Bootstrap Tree view support for IE9 and more! PATTERNFLY
  16. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

    Boy Scout's Rule Always leave the campground cleaner than you found it.
  17. HOW CAN I ACTUALLY USE THIS IN A JAVA APP?

    Clean Code by Robert C. Martin "Small things matter.” "God is in the details.”