TextEditor - Designing open source apps


Published on

Presentation for the San Francisco Sandstorm Meetup. Overview of design process in creating TextEditor. Principles for designing Sandstorm Apps.

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

TextEditor - Designing open source apps

  1. 1. TextEditor Designing open source apps March 24, 2016 San Francisco, Sandstorm Meetup By Richard Caceres
  2. 2. About Me ● Richard Caceres ● Designer & Developer ● @rchrd2 ● http://rchrd.net ● Currently: ○ Archive.org ● Previously ○ Wowlist (co-founder) ○ Cargo Collective
  3. 3. Summary Free open source software is great. If I want to alter the features, I can just fork it,learn the code, modify it, build it, upload it, and maintain a fork... So we can avoid this, let's build customizability into our apps. Let's also follow a simple set of design principles to create a more cohesive user experience across apps. TextEditor is a working example of this approach.
  4. 4. What is "free software"? ● You have the freedom to run the program, for any purpose. ● You have the freedom to modify the program to suit your needs (eg access to source code). ● You have the freedom to redistribute copies, either gratis or for a fee. ● You have the freedom to distribute modified versions of the program, so that the community can benefit from your improvements. (from New Media Reader, intro to The GNU Manifesto by Richard Stallman)
  5. 5. What makes "good" free software? ● It works! ● The features are simple and do not try to do too much. ● The source code is simple and easy to modify. ● It's extensible or configurable. ○ A lot of times this is all that's needed, rather than forking to modify. ○ For example, custom CSS.
  6. 6. Why Sandstorm? Sandstorm makes it easy to: ● Build your own tools ● Share the tools you build ● Use other open source tools It's also simpler to have everything on one machine rather than scattered across many services around the world.
  7. 7. The importance of "design" for apps ● Design ≠ Decoration ● Functional, efficient and ergonomic ● Emotional enjoyment (makes users happy) ● Focus on the tool. Good design is invisible. ● Consistency is also important, because it reduces cognitive load when switching between applications
  8. 8. Mac OS X Mac OS X is an example of a cohesive system of apps that use same building blocks for user interface ● Safari ● Notes ● Mail ● Maps, etc On the web, Google Apps is another example.
  9. 9. Examples of successful open source design ● Atom Editor ○ Good defaults ○ Extremely customizable ● Processing ○ Simple and intuitive for people learning to program ○ Subtle design choices ● Wekan (for Sandstorm) ○ Very intuitive ○ Feels polished ○ Some customizability (change color, title)
  10. 10. What are some visual guidelines for a Sandstorm application? ● Use a single column ○ Sandstorm places the grain into an iframe within existing columns. ○ The visual hierarchy is too complex with nested column layouts. ○ A single column is also responsive ● Use system fonts when possible ○ eg: "font-family: sans-serif;" or "font-family: monospace;", etc. ○ These look the best whether you're on a Mac, PC, Chromebook, phone, etc. ○ (I break this rule a little for TextEditor, which uses "Menlo, monospace;")
  11. 11. What are some visual guidelines for a Sandstorm application? ● Avoid heavy use of graphics, icons, or other visual elements that overly stylize the application. ○ The goal is to be simple and strive for the essence of a tool. ○ Strip away ornamentation and focus on functionality. ● Allow user to customize CSS ○ If the application structure is simple, it should be easy for someone to edit the CSS. ○ This allows a user to make the software their own and fit their needs. If application developers follow these guidelines, this could lead to a cohesive user experience between Sandstorm applications.
  12. 12. TextEditor, an example of these methods Github https://github.com/rchrd2/TextEditor App market https://apps.sandstorm. io/app/n4n49dkfyskmhcmg5h0mfzk4kjvce2j cs8ravr7y7uw9xs2pzghh
  13. 13. TextEditor's stack ● Sandstorm handles document lifecycle ● Meteor handles real-time data sync and persistence ● Polymer is used for web component building blocks for UI ● CSS Flexbox is used for layout.
  14. 14. Why Polymer (Web Components)? Framework fatigue ● React ● Ember ● Blaze (Meteor) ● Plain HTML Re-use the same components across development stacks It works! See (`static-html`) package for blaze-less Meteor. Not sure if I'll continue to use it, though. Currently working on a new app in Blaze, but might switch to Polymer.
  15. 15. <paper-drawer-panel disable-swipe="true" disable-edge-swipe="true" force-narrow right-drawer> <div drawer class="drawer"> <form> <div class="drawer-title"><b>Document Settings</b></div> <!- ... --> </form> </div> <div main class="flex layout vertical"> <textarea id="Textarea"></textarea> <div class="footer layout horizontal"><!-- ... --></div> </div> </paper-drawer-panel> This is using the "paper-drawer-panel" Polymer Web Component. Web Component Example
  16. 16. <html> <head> <style> * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0;} body { display: flex; flex-direction: column; } textarea { flex: 1; width: 100%; } </style> </head> <body> <textarea>Hello</textarea> <footer>Footer stuff</footer> </body> </html> Flexbox Example
  17. 17. Sandstorm app technical concerns ● Once you publish, you have to support that version ○ If it was your web service, you could migrate and forget. ○ From here on out, I have to make sure TextEditor supports MongoDB. ● DDP header issues are fixed thanks to Kenton's Accounts-Sanstorm package! ○ Previously handling Sandstorm permissions with Meteor was difficult. Now it is easy.
  18. 18. What's next? ● Make TextEditor more efficient ● Bookmarks app (see next slide)
  19. 19. The end. ● These are my opinions. What do you think? ● TextEditor on Github: https://github.com/rchrd2/TextEditor ● Follow me on Twitter: @rchrd2 ● Visit my website: http://rchrd.net ● Thanks!