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

Secrets in building great enterprise apps

Secrets in building great enterprise apps

Let's talk about enterprise apps! Often those apps don’t live in an app store. They live in a private cloud or private network. Maybe even secured and behind a firewall. You and I, might not even be aware of these types of apps. You need to have experience, with building complex applications like these. But that’s difficult, if you don’t really see these apps in the wild. In this session, Lee Boonstra will discuss why enterprise apps can be complex, and how you can build better apps, with maintainability and scalability in mind!

Lee Boonstra

April 15, 2016

More Decks by Lee Boonstra

Other Decks in Technology


  1. Secrets in building great enterprise apps Lee Boonstra @ladysign

  2. Lee Boonstra, Sales Engineer, Sencha Inc. provides everything a developer

    needs to rapidly build data intensive cross-platform enterprise web applications
  3. Lee Boonstra @ladysign - [email protected] http://www.leeboonstra.com

  4. “Enterprise Apps. It’s a totally different beast.”

  5. Almost 70% of enterprises consider web technologies as critical to

    their application development strategy
  6. JavaScript runs anywhere!

  7. JavaScript is easy to learn https://www.flickr.com/photos/poperotico/3921069882/

  8. Let’s talk about apps… https://www.flickr.com/photos/telstar/3449684808/

  9. App or Site?

  10. • Internal Apps • Not in an App Store •

    Private Cloud • Private Network or Intranet • Secured. Behind a Firewall Enterprise Apps https://www.flickr.com/photos/ibm_media/15951693251
  11. We all need apps

  12. Example

  13. Example

  14. Example

  15. Example

  16. Example

  17. Enterprise Apps are complex

  18. • Written over the years • Written by various people

    • Written by external parties Large codebases https://www.flickr.com/photos/[email protected]
  19. • Over a long period of time • Teamwork with

    large teams • Teamwork with external teams • Release schedules A lot of maintenance
  20. Solution Code needs structure • Your code needs structure •

    Separate concerns • Use a software pattern • Make code re-usable
  21. • Need to run across multiple • browsers • platforms

    • devices Cross platform https://www.flickr.com/photos/umpcportal/5860466034/
  22. IE is not dead for the enterprise! • Usage of

    legacy apps • Legacy operating system • IE is not backwards compatible. • IE8 runs on Windows XP • IE9 runs on Windows Vista+, • IE10, Windows 7+. • Upgrade OS = new hardware & licenses!
  23. Solution With HTML5 you can write code once, run anywhere.

  24. • Apps need to be designed for their use •

    Desktop vs. Mobile • Mouse vs. Keyboard • ARIA / Screenreader support Right Experience
  25. Solution • Think about your users • Design for your

  26. Solution • Detect the device • Serve the correct: •

    code • component sets • functionality • data
  27. • Huge amount of data • Fast loading of data

    • How to visualize your data Data intensive https://www.flickr.com/photos/cipherswarm/2414578731/
  28. None
  29. At CERN, they document and research the collision of particles.

    A huge amount of data that needs to be stored. We are talking here about Terabytes! https://www.flickr.com/photos/side78/6293329368
  30. Solution Big data, but fast performance • Big data on

    the back-end not front-end • Paging of data • Lazy loading of data • Fast connection to database • Production machine needs to be fast
  31. • Start Time • Fast / Responsive UI • Serving

    of files Data, Files • Tasks High Performing https://www.flickr.com/photos/shutterrunner/12119303663
  32. Solution • Optimize builds • images, scripts, CSS • Deferring

    parsing of scripts • Minimizing HTTP Requests • Fast connection to database • Production machine needs to be fast
  33. • Integration of Hardware • Integration with other servers /

    systems External integrations https://www.flickr.com/photos/johanl/5873732453
  34. Solution Integration with other systems / hardware • Webservices •

  35. • Secure data • Prevent hack attempts Security https://www.flickr.com/photos/nowhere77/4378130542/

  36. Solution Security and HTML5? Front-end code is not secure, everything

    is visible and validations can be bypassed. • Secure communication • Set permissions • Don’t store sensitive information on front-end • Prevent code injection (XSS and CSRF)
  37. • One look & feel • Usability • Styleguide •

    Developers need to work together with UI/ UX designers Corporate Identity https://www.flickr.com/photos/thomashawk/4853281864
  38. Designers vs Developers

  39. The problems that developers face… What the designer promised. What

    technology the developer can use.
  40. Solution • Design teams needs to be aware of used

    technologies • Think about components, less about “pages” • Work with Styleguides
  41. • App needs to run while offline • Needs to

    sync data when online Offline capabilities
  42. Solution Solutions on client-side: • App Cache • LocalStorage /

    SessionStorage • WebSQL / IndexDB • Check online connection, batch and sync data
  43. • Hard to find resources • App / Service seems

    stable • Original team is gone • It might not run in modern browsers • It might not run well on mobile devices Legacy Technologies
  44. Solution Upgrade! Risks of not upgrading: • Browsers push automated

    updates • Performance, memory usage No access to newer features No (official) support
  45. • Deployment of apps on servers • Balancing the load

    • Deployment of apps on devices Distribution https://www.flickr.com/photos/stumayhew/5440763253
  46. Solution • HTML5 vs. Native: With HTML5 you write the

    code only once. • Cloud vs. On-prem: Let a third party deal with hardware & scaling
  47. How to deploy HTML5 apps? Host apps on a web

    server • Web applications can work offline. • New version available? Only download the differences • Best performance! Deploy as hybrid • Mobile: Cordova / PhoneGap • Desktop: Electron
  48. • Needs to be able to run for a long

    time • Needs to survive from browser updates • Needs to be scalable and maintainable over the years Last for a long time https://www.flickr.com/photos/iceninejon/3716169053
  49. Solution Survive from auto browser updates • Less dependencies is

    more Prepare for the future • Use design patterns, to stick to a general approach Commercial products can guarantee life-time support
  50. Last long Deployment & Distribution Dealing with legacy technologies Offline

    support Corporate Design Security Hardware integration Data intensive Experience Maintainability Cross Platform Large code bases Scalability
  51. “We need to change our mindsets.” “With a webdesign approach

    you won’t make it.”
  52. “Let a framework deal with the pitfalls of serious app

  53. A good framework can help you! • Making screens pixel

    perfect, • across (legacy) browsers and devices • Delivering the best experience for the right device • Use simple API calls, to solve time consuming work • Write in one unified coding style
  54. Frameworks are well tested “At Sencha we run 100.000s of

    automated test a day”
  55. Introducing Ext JS 6 One framework, to build cross platform

    apps • Write JavaScript code, render HTML5 • No HTML or CSS experience required • No dependencies, one coding style Focus on Scalable / Maintainable Code • OOP, MVC/MVVM Architecture Patterns Lots of data-aware re-usable components
  56. A Complete Framework Class system Gesture system Data package Layouts

    Responsive configs Data binding ARIA Component query Z-index manager Architecture Routing Forms Enhanced Grids Pivot Grids Infinite scrolling Keyboard support Charting & Drawing Offline Support Themes/Templates Documentation Screen reader
  57. Universal Apps

  58. “Enterprise App Development = Serious App Development”

  59. Lee Boonstra Sales Engineer, Sencha Inc. Twitter: @ladysign - [email protected]

    http://www.leeboonstra.com http://www.speakerdeck.com/savelee Thank you!