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

The Future of Frontend Development in Open edX

The Future of Frontend Development in Open edX

Presented at Open edX Conference 2017 in Madrid
Video available at https://youtu.be/PpgaVjcMoL0?t=905

The frontend is the face of the Open edX platform: the part users see, interact with, and recognize. It’s our goal to ensure this interface is usable by everyone, including users on mobile devices, users with disabilities, and users with poor internet connectivity. Come learn about our ongoing journey towards a flexible and modern frontend that delights both users and developers, and get a sneak peek at the open-source toolkit we’re building for the Open edX community and beyond.

753b27e2e22830f0716ff4c9f2538a13?s=128

Ari Rizzitano

May 24, 2017
Tweet

Transcript

  1. The Future of Frontend Development in Open edX FedX: What’s

    Next? Ari Rizzitano, edX Open edX Conference 2017
  2. Nice to meet you! Ari Rizzitano
 senior frontend engineer
 edX

    Core Team
 arizzitano@edx.org @arizzitano 2 !
  3. “ ” FedX mission Empower the edX development community by

    continually defining, evangelizing, and supporting front end best practices.
  4. FedX: What’s Next? 1. Prior Art 2. Pain Points 3.

    Remediation 4. New Tech 4
  5. 5 PRIOR ART

  6. Server Side 6

  7. Client Side 7

  8. UX Pattern Library • Homegrown CSS framework & HTML styleguide

    for Open edX platform • Defines colors, fonts, etc. as well as a few UI patterns • http://ux.edx.org/ 8
  9. Asset Management • Django asset pipeline • Watches & compiles

    SASS & JS files 9 collectstatic
  10. 10 PAIN POINTS

  11. Performance • Heavy page weight (static assets) • Slow render

    time • Much worse for mobile browsers or slow network connections 11
  12. Performance 12

  13. Performance (Mobile) 13

  14. Performance (Geo) 14

  15. Accessibility • Solving for a11y requires domain knowledge, attention to

    detail, and extensive manual testing • This overhead scales exponentially with code duplication 15
  16. Accessibility 16

  17. Maintenance 17

  18. Maintenance 18 As any codebase evolves, it becomes harder to

    grok in its entirety.
  19. 19 REMEDIATION

  20. Goals • Deliver an optimal experience for all users •

    Develop with maintenance in mind • Make it easy and enjoyable for developers to contribute to the Open edX frontend 20
  21. 21 CONSCIOUS DECOUPLING

  22. Conscious Decoupling • Separation of concerns: data, logic, and appearance

    • Consistent, versioned integration points so each service can change independently • Frontend as distributed system 22
  23. Data • Content of the UI • Informs the logic

    layer • Comes from server or user input • Integration points: web APIs, component parameters 23
  24. Logic • Behavior and organization of the UI • JS

    + HTML • Must be consistent, accessible, and embody best practices • Integration points: web APIs, selectors 24
  25. Appearance • How the UI looks • CSS + HTML

    • Must be extensible and receptive to theming • Integration point: selectors 25
  26. All Together Now 26 server rendered UI data (JS state)

    templates JSON logic (JS, HTML) appearance (CSS) selectors AJAX/XHR requests existing server-side templates user actions
  27. 27 NEW TECH

  28. New Tech 28

  29. Web Fragments • Pluggable user interfaces via Django application •

    Usable within edx-platform and XBlock implementations • Approved via OEP-12 29
  30. Asset Management 30 with • Handles JS as well as

    SASS • Not dependent on Django • Enables modern ES2015 code via Babel
  31. • Themeable, extensible CSS framework • Version 4 (beta release

    coming soon) • Approval in progress via OEP-16 31
  32. • JS framework encouraging encapsulation and modularity • Interoperates well

    with legacy code • Approved for Open edX via OEP-11 32
  33. Component Library • Environment-agnostic chunks of UI • Consistent markup,

    easy to style or theme • Accessible functionality is baked in! 33
  34. Get Involved • #front-end in the Open edX Slack •

    edx-code mailing list • PRs always welcome • Watch the OEP repo:
 https://github.com/edx/open-edx-proposals/ • Come find us this week! 34
  35. fin 35