TextExpander: Transitioning to Cross-Platform SaaS with Meteor - - PowerPoint PPT Presentation

TextExpander: Transitioning to Cross-Platform SaaS with Meteor & Galaxy

Greg Scown Smile, Founder Maia Olson Smile, Marketing

What's TextExpander?

An Abbreviation (what you type) + Content (expands out of the abbreviation) = TextExpander Snippet Using a quick search or abbreviation, instantly insert "snippets" of text from your repository of boilerplate, emails, code templates and

• ther content.

Type with accuracy and consistency

Keep a knowledge base of your email replies, URLs links, code templates, scripts, anything you need to type with speed and accuracy.

Our Journey

• 2006 - acquire Textpander, transform it into TextExpander for Mac
• 2009 - launch TextExpander touch on iPhone and iPad
• 2014 - Dropbox and iCloud Drive sync
• 2015 - research good team sharing methods => Meteor
• 2016 - New TextExpander is service, incl. sync between Mac,

Windows, and iOS apps, backed by Meteor

Text expansion apps make 5 min support emails 30sec. People start requesting Dropbox sync with TextExpander touch. Teams start requesting cross-person sharing, very hard to do with Dropbox:

• URL hosted group = annoying linking and updating
• email a file = no co-editing at all

Early TextExpander New TextExpander (with Meteor)

Stand alone Mac app, iOS app All included, apps for Mac, Windows, iOS Single purchase Subscription Sync via Dropbox, iCloud Drive TextExpander.com seamless sync URL hosted groups, hard to update, hard to share TextExpander.com hosted groups, live updating, easily shared via email No team-level features Full Team tier with special sharing, permissions, stats

Huge change

• all new pricing model
• new Win and Web apps
• sharing! it's easy now!
• app setup only takes a sign in (previously, had to hook up TE with your syncing app)
• Allows public or private hosting of a group to share via URL or in Public Groups <https://textexpander.com/entry/say-hello-to-textexpander-public-groups/>

Snippet group Admin

• edit permissions
• add/remove group members

Snippet group Members

• expand snippets
• opt. edit snippets

Organization Admin

• manage billing
• manage permissions
• add/remove paid members
• view stats

Gather all snippets and groups for central management in a TextExpander organization Shared snippets sync between all users, and all devices instantly

Team level sharing

• A TextExpander Organization gathers all team members for easier

sharing, consolidated billing

• Organization Admin add/remove paid members, permissions
• Admin of snippet groups add/remove group members, edit permissions
• Usage statistics
• Fast onboarding for new team members using email auto-domain sign

up, selected groups are auto-joined with default group permissions Share snippets to those who need them Choose Admin to manage the members, pick who can edit Snippets become a company knowledge base, keep it with the company, even as people come and go Special Admin panel of TextExpander.com to manage, incl. stats on all shared snippet usage <https://textexpander.com/entry/measuring-teamwork-textexpander-organization-stats/ >

Average Team users gain 4 hours of productivity per month Active users gain an entire 8 hour work day Typical teams are around 12 users, with teams of nearly 1,000 users

Facts we've found from over a year of teams using TextExpander.

Why Meteor?

• Rapid development of reactive web app
• Ease of building multi-device sync atop DDP
• Good documentation for relatively early stage

framework

• Solid foundation (node.js)
• Robust, active community
• simple-todos example / “see” the magic
• “early stage” relative to Cocoa / UIKit
• Meteor Guide <https://guide.meteor.com>
• The Meteor Chef <https://themeteorchef.com>
• Your First / Second Meteor Application <http://meteortips.com>
• Meteor Night

Architecture

Meteor (Galaxy) MongoDB Transport Layer macOS Client iOS Client Windows Client Snippet Editor Web Client Admin Client

• Meteor layer should be very familiar
• Admin and web client are layered directly atop Meteor (Blaze for older bits; React for newer bits)
• Platform clients share transport layer and snippet editor, which is also shared with web client
• iOS client includes custom keyboard

Cross-Platform Clients

• Pre-existing code base (macOS, iOS)
• Added Windows client
• Considered Cordova, primarily mobile
• Considered Electron, expansion is platform specific
• Leveraged Meteor for web app, cross-platform sync,

and reactivity

• Started with macOS and iOS clients
• Added Windows client after choosing to adopt Meteor
• Considered Cordova, Electron
• Expansion is quite platform-specific; different key queuing; different ways to erase; different clipboard function
• Leverage Meteor for web app, cross-platform sync, reactivity
• Sharing-specific settings are centralized in the web app rather than the clients

Cross-Platform Sync

• Thin layer atop meteor-ddp
• Transport layer is platform agnostic JavaScript
• Subscriptions limited to user accounts, snippet

groups

• Uses REST to sync changes to snippets (bulk)
• Clients handle conflicts, offline storage
• Important to limit subscriptions / reactive data
• On Windows, started online only (speaks well of both Meteor and Galaxy); offline storage to come

Admin Interface

• Started with 3rd party

package

• Grew to custom in-house
• Uses Highcharts
• Monthly emails
• Started with third party package
• Rich array of packages / Atmosphere is a definite advantage to Meteor, but also a cautionary tale
• Existing packages can serve as basis for customization
• Shout out to Highcharts <https://www.highcharts.com>
• Monthly email, billing, other periodic tasks leverage percolate:synced-cron

Hosting / Galaxy

• Easy deployment, scaling
• Outsourced DevOps
• Solid load balancing
• Good visibility / dashboard
• Backed by MDG expertise
• Deployment via CI server at CodeShip
• Add / subtract containers with single button from dashboard
• See container load, aggregate / per container live logs
• Solid 1-day support turnaround (in our experience)

Lesson: Update

• MongoDB Storage Engine (MMAPv1 -> WiredTiger)
• See Meteor 1.4 Release Notes
• WebView -> WKWebView
• Random crash on iOS w/ UIWebView / JSContext
• Switch to WKWebView + WebViewJavaScriptBridge
• Some things you should see coming and not hesitate
• “Although Meteor 1.4 supports MongoDB 2.6 and up, as well as the older MMAPv1 storage engine, we recommend you update your database to use the new WiredTiger storage

engine and use MongoDB 3.2.”

• Some things are obvious only in hindsight

Lesson: Linting

• Our background: Xcode; compiler warnings
• JavaScript is a whole new world
• Atom & ESLint are our new friends
• Need to ensure team is using same standards:
• Add atom-packages.txt file to repo
• apm install --packages-file atom-packages.txt

Lesson: Things Change Fast

• ES5 -> ES6(+)
• Meteor / Atmosphere -> npm packages
• Blaze -> React
• kadira.io -> Galaxy APM (Pro)
• For some changes, can adopt as you go
• Now, we first look for npm packages and have even replaced Meteor packages with standard npm ones

The Future

• Broader adoption of React / replacement of Blaze
• Universal UI: Outline view, toolbar, group settings
• Leverage React components for all clients
• miniMongo / LiveQuery -> Apollo / GraphQL
• API
• Leverage React-based components built initially for the Windows client back to web, macOS, iOS
• Continue to build new UI components in React and leverage across the platforms

Q & A

Visit TextExpander.com/meteor-night

Get a copy of tonight's slides More information on TextExpander Special 40% discount off a year of TextExpander