In this theater session, join Twitter as they walk through how they re-built their Windows app using the new Progressive Web App platform in Microsoft Edge and Windows 10. This new app powers the Twitter experience on the Web, Android devices, Windows, and more, providing a performant, feature rich experience regardless of form factor, all from one unified codebase providing a modern experience on any device. 

2. THR2404

3. 3
1
2
3
4
5
Journey to PWA
Building Twitter for Devices
Building Twitter for Windows
Challenges / Lessons
Thinking ahead
Agenda

4. 4
Hatching a PWA

5. 5
Section
Back in the day
~50% mobile engineers, 50% Desktop Engineers
Responsible for several code bases and Some(Scala)
4 test infrastructures spanning Ruby, Scala, and JS
~ 1 day to get new contributors running locally
Incremental compiles ~1min, clean builds ~30mins
2015 2016 2017 2018
Goal: Keep the site chugging

6. 6
Section
Responsive Web
Setup time for a new engineer ~5 minutes
See changes in < 10 seconds
Consistent design with other Twitter properties
Modular components and organization
Uses same APIs as Android/iOS clients
2015 2016 2017 2018
Goal: Prototype + Launch something to replace Twitter Mobile, Logged In

7. 7
Section
Progressive Web App (PWA)
100% “StarWeb” (get it? *Web)
Help create APIs that were previously desktop only
Flux —> Redux, reorganize code as we move from prototype to production
Leverage new Web APIs to create a rich, retentive experience
2015 2016 2017 2018
Goal: Create a full-featured, fast mobile Twitter experience

8. 8
Section
Twitter PWA Launch - April ‘17
Faster
Universal availability
Lighter
2
<600 KB to add to home screen
Engaging
3
Push notifications, data saver,
explore tab
1

9. 9
Section
Client strategy at Twitter
User: Common interface that makes Twitter feel familiar on any device. Over 60% of
our users on the PWA use Twitter on more than 1 client
Developer: Fewer surfaces to update, focus on what we are good at
2015 2016 2017 2018
Goal: deliver a feature rich, regularly updated experience

10. 10
Section
No client left behind
Bookmarks came to the PWA first —
quicker to build and release from an
engineering perspective
Since our PWA has Bookmarks, so
does Twitter for Windows now!

11. 11
Section
Reactions to PWA in the wild

12. 12
Section
Make one app that provides a
progressively enhanced
experience to all users

13. 13
Section
APPXs, APKs, and Kai, Oh My! (2018)
Goal: Extend the reach and impact of the PWA
Add to home screen + push notifications once installed help increase retention
Be the place users can share what's happening
How do you distribute a website? Basic perception issue of a PWA.

14. 14
Section
APPXs, APKs, and Kai, Oh My! (2018)
Goal: Extend the reach and impact of the PWA

15. 15
Section
APPXs, APKs, and Kai, Oh My! (2018)
Goal: Extend the reach and impact of the PWA

16. 16
Section
WARNING:
Maybe try this at home

17. 17
Section
For many people, a native app is
still the right experience

18. 18
Building Twitter for all Devices

19. Body level two
Section
MOBILE
Building for Windows users
Over 70% of people who use Twitter on Windows are using it on a desktop
device
How do you make something work for well for both experiences?
Lightweight
Performant
Fast
Immersive
Complementary
Convenient
19
DESKTOP

20. 20
Section
An app alone does not a PWA
make

21. 21
Parameters of an App
Device
Data Accessibility
Layout
Modals / Dialogs
Navigation
Modality
Hover / press
Presentation of menus
Keyboard Supplements
Installed / Wrapped
Locality
Network conditions
Internationalization
RTL
A11Y

22. 22

23. 23
Parameters of an App
Device
Data Accessibility
Layout
Modals / Dialogs
Navigation
Modality
Hover / press
Presentation of menus
Keyboard Supplements
Installed / Wrapped
Locality
Network conditions
Internationalization
RTL
A11Y

24. Body level two
24
Section
Body level two
24
Parameters in Practice
• Flexible Layouts
• Master / Detail
• Sidebar Layout
• Modals
• Dropdowns vs Sheets
• Network cues for live engagements / video
streams / autoplay
• Dynamic bundling, getting the right experience to
the right user
• Enter to send DMs
• Keyboard shortcuts to Navigate

25. 25
Sidebar Layout

26. 26
Master Detail Layout

27. 27
Modals

28. 28
Modals

29. 29
Dropdowns

30. 30
Making a Modal
import ModalRoute from './components/ModalRoute';
<ModalRoute
component={MediaDetailScreen}
exact
key="mediadetail"
modalSize="maximized"
path="/:screenName/status/:statusId/:mediaType/:index"
/>
import { Route } from 'react-router-dom';
<Route
component={MediaDetailScreen}
exact
path="/:screenName/status/:statusId/:mediaType/:index"
/>

31. 31
Building Twitter for
Windows 10

32. 32
Section
Creating the Windows App
PWABuilder.com
Changed logos
Edited version info
Uploaded + Submitted
Integration testing
VirtualBox + VM, Charles Proxy to https://localhost (with hosts file change)
Dev Tools Preview Edition
Manually install/sideload to debug

33. 33
Section
Windows Insiders Beta program
Why?
Learned about user expectations
Ability to communicate with users across countries and languages
Beta feedback (from Tweets, Feedback Hub, Reviews)
Paste Images into Compose
Share to Twitter
Night mode
Streaming / Refresh Timeline support
Screen reader support was good!

34. 34
Section
Big-P PWA
Now that we’ve provided the basic features, we can focus on building integrated
experiences into Windows (or any other native platforms)
Current Windows APIs
PasswordVault
Share Integration
Notifications
Pinning
Jump Links
Store reviews / Feedback
Timeline

35. 35
Section
Big-P PWA Examples

36. 36
Share Integration
<Applications>
<Application Id="Twitter" StartPage="https://mobile.twitter.com/">
<Extensions>
<uap:Extension Category="windows.shareTarget">
<uap:ShareTarget>
<uap:SupportedFileTypes>
<uap:FileType>.jpg</uap:FileType>
<uap:FileType>.jpeg</uap:FileType>
<uap:FileType>.png</uap:FileType>
<uap:FileType>.gif</uap:FileType>
</uap:SupportedFileTypes>
<uap:DataFormat>Text</uap:DataFormat>
<uap:DataFormat>Bitmap</uap:DataFormat>
<uap:DataFormat>WebLink</uap:DataFormat>
</uap:ShareTarget>
</uap:Extension>
</Extensions>
</Application>
</Applications>
appxmanifest.xml

37. 37
Share Integration
init.js / Core Path
// This must not be deferred so that it can receive the initial 'activated' event in time
window.Windows.UI.WebUI.WebUIApplication.addEventListener(
'activated',
e =>
microsoftInterfaceLoader().then(microsoftInterface => {
microsoftInterface.handleActivatedEventFactory(e);
}),
false
);
// Without this, the app will first refresh to the start path before every activate event
window.MSApp.pageHandlesAllApplicationActivations(true);

38. 38
Share Integration
microsoftInterface/handleActivatedEvent.js
1. Handle activated Event
2. Gather all data from share event
3. Do whatever we are doing (compose a tweet)
4. Callback to close the window / say we are done

39. 39
Share Integration
1. Handle Activate event
export const handleActivatedEvent = e => {
const ActivationKind = window.Windows.ApplicationModel.Activation.ActivationKind;
if (e.kind === ActivationKind.shareTarget) {
return handleShareEvent(e);
} else {
// You might handle other types of launches here: notifications, tile taps, etc.
}
};

40. 40
Share Integration
2. Gather all data from share event
const handleShareEventText = event => {
const StandardDataFormats = window.Windows.ApplicationModel.DataTransfer.StandardDataFormats;
const shareData = e.shareOperation.data;
const { title, description } = shareData.properties;
if (shareData.contains(StandardDataFormats.text)) {
shareData.getTextAsync().then(text => sendComposeStateAndSetReturn(
{
tweetText: `${title}n${description}n${text}`,
},
event
);
}
}

41. 41
Share Integration
3. Do the thing
4. Callback to close the window / say we are done
const sendComposeStateAndSetReturn = (state, event) => {
browserHistory.push({
pathname: '/compose/tweet',
state
});
};
export const shareCompletedCallback = () => {
e.shareOperation.reportCompleted();
};

42. 42
Section
Progressive doesn’t stop at Web
APIs; extends to native APIs as
well

43. 43
Section
Future opportunities
MS API is massive, lots of cool opportunities
Pen to compose a tweet
Cortana voice commands
IoT Clicker to Tweet
Proximity detection to suggest event hashtags
Image Recognition to propose captions
...or to read uncaptioned images
2015 2016 2017 Beyond!2018

44. 44
Section
Challenges
• Tradeoff of feature set
• We had to give up some features in the short-term to build a consistent
experience in the long-term
• Data saver, Bookmarks, Live Engagements + more that were on the PWA first

45. 45
Section
Challenges
• Need a way to convey updates since we're not updating in the store
• Live Tile Updates + ServiceWorkers are hard
• Coordinated code launches can be tricky (e.g. jump / share)
• Requires feature gating things on the site

46. 46
Takeaways
Right Tool
Make an app that suits
your team and business
Identify
Paramaters
Think of the user
experience as a
parameter into you app
Big-P PWAs
Create an awesome base
experience, and adapt to
as many params as you
can (including native)

47. 47
Member name
Deck title
Member name
Member name Member name Member name
Deck title
X
Member name
Meet the rest of the team!

48. 48
Questions

50. THR2404