Permalink
Browse files

Initial content

  • Loading branch information...
0 parents commit 4a2931a80757270b360def1dd88818dc83031250 @matthewjohnston4 matthewjohnston4 committed Apr 13, 2016
Showing with 4,848 additions and 0 deletions.
  1. +12 −0 .gitignore
  2. +1 −0 CNAME
  3. +30 −0 CONTRIBUTING.md
  4. +163 −0 LICENSE
  5. +5 −0 README.md
  6. +58 −0 _config.yml
  7. +31 −0 _data/authors.yml
  8. +33 −0 _data/features.yml
  9. 0 _data/nav.yml
  10. +7 −0 _data/nav_docs.yml
  11. +3 −0 _data/promo.yml
  12. +19 −0 _data/tutorials.yml
  13. +61 −0 _docs/1-1-planning.md
  14. +423 −0 _docs/1-2-design.md
  15. +568 −0 _docs/1-3-data.md
  16. +256 −0 _docs/1-4-testing.md
  17. +18 −0 _docs/1-5-deployment.md
  18. +84 −0 _docs/1-A1-setup.md
  19. +128 −0 _docs/1-A2-relay.md
  20. +16 −0 _docs/1-A3-windows.md
  21. +29 −0 _includes/blog_pagination.html
  22. +10 −0 _includes/blog_post.html
  23. +8 −0 _includes/content/gridblocks.html
  24. +7 −0 _includes/content/items/gridblock.html
  25. +52 −0 _includes/doc.html
  26. +47 −0 _includes/doc_paging.html
  27. +51 −0 _includes/doc_rating.html
  28. +33 −0 _includes/footer.html
  29. +25 −0 _includes/head.html
  30. +17 −0 _includes/header.html
  31. +9 −0 _includes/hero.html
  32. +3 −0 _includes/katex_import.html
  33. +210 −0 _includes/katex_render.html
  34. +20 −0 _includes/nav.html
  35. +76 −0 _includes/nav_blog.html
  36. +104 −0 _includes/nav_docs.html
  37. +3 −0 _includes/plugins/all_share.html
  38. +1 −0 _includes/plugins/button.html
  39. +20 −0 _includes/plugins/fb_pagelike.html
  40. +4 −0 _includes/plugins/github_star.html
  41. +4 −0 _includes/plugins/github_watch.html
  42. +5 −0 _includes/plugins/google_share.html
  43. +1 −0 _includes/plugins/group_join.html
  44. +18 −0 _includes/plugins/like_button.html
  45. +34 −0 _includes/plugins/post_social_plugins.html
  46. +87 −0 _includes/plugins/slideshow.html
  47. +5 −0 _includes/plugins/twitter_follow.html
  48. +4 −0 _includes/plugins/twitter_share.html
  49. +33 −0 _includes/post.html
  50. +24 −0 _includes/social_plugins.html
  51. +1 −0 _includes/ui/button.html
  52. +11 −0 _layouts/blog.html
  53. +12 −0 _layouts/default.html
  54. +11 −0 _layouts/doc_page.html
  55. +5 −0 _layouts/docs.html
  56. +87 −0 _layouts/home.html
  57. +10 −0 _layouts/page.html
  58. +10 −0 _layouts/plain.html
  59. +6 −0 _layouts/post.html
  60. +6 −0 _layouts/redirect.html
  61. +10 −0 _layouts/support.html
  62. +1,431 −0 _sass/_base.scss
  63. +63 −0 _sass/_feedbackWidget.scss
  64. +43 −0 _sass/_reset.scss
  65. +48 −0 _sass/_slideshow.scss
  66. +126 −0 _sass/_syntax-highlighting.scss
  67. +97 −0 css/main.scss
  68. +5 −0 index.md
  69. BIN static/favicon_junction.png
  70. BIN static/fonts/LatoLatin-Black.woff
  71. BIN static/fonts/LatoLatin-Black.woff2
  72. BIN static/fonts/LatoLatin-BlackItalic.woff
  73. BIN static/fonts/LatoLatin-BlackItalic.woff2
  74. BIN static/fonts/LatoLatin-Italic.woff
  75. BIN static/fonts/LatoLatin-Italic.woff2
  76. BIN static/fonts/LatoLatin-Light.woff
  77. BIN static/fonts/LatoLatin-Light.woff2
  78. BIN static/fonts/LatoLatin-Regular.woff
  79. BIN static/fonts/LatoLatin-Regular.woff2
  80. BIN static/images/button-playground.gif
  81. BIN static/images/f8_app_splash.png
  82. BIN static/images/f8_app_tile.jpg
  83. BIN static/images/f8_app_tile.png
  84. BIN static/images/iOS Tab Bar@3x.png
  85. BIN static/images/iOS vs Android Segmented Controls@3x.png
  86. BIN static/images/iOS vs. Android@3x.png
  87. BIN static/images/info_view.png
  88. BIN static/images/redux_flowchart.png
  89. BIN static/images/redux_logger.png
  90. BIN static/images/screenshot-app@2x.png
  91. BIN static/images/screenshot-server@2x.png
  92. BIN static/logo.png
  93. BIN static/logo_square_small.png
  94. BIN static/logo_square_small.psb
  95. BIN static/oss_logo.png
  96. BIN static/oss_logo_dark.png
  97. BIN static/videos/flow.mp4
  98. +6 −0 tutorials/index.html
@@ -0,0 +1,12 @@
+*~
+.sass-cache/
+_site/
+.jekyll-metadata
+*.psd
+_config_*.yml
+
+# Ignore locked gems because GitHub Pages controls the gems in production, not Nuclide. Omit the
+# lock so `bundle install` always installs the latest.
+Gemfile.lock
+*.psd
+_docs/updates.md
@@ -0,0 +1 @@
+makeitopen.com
@@ -0,0 +1,30 @@
+# Contributing to makeitopen.com
+We want to make contributing to this project as easy and transparent as
+possible.
+
+## Pull Requests
+We actively welcome your pull requests.
+
+1. Fork the repo and create your branch from `gh-pages`.
+2. If you haven't already, complete the Contributor License Agreement ("CLA").
+
+## Contributor License Agreement ("CLA")
+In order to accept your pull request, we need you to submit a CLA. You only need
+to do this once to work on any of Facebook's open source projects.
+
+Complete your CLA here: <https://code.facebook.com/cla>
+
+## Issues
+We use GitHub issues to track public bugs. Please ensure your description is
+clear and has sufficient instructions to be able to reproduce the issue.
+
+Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
+disclosure of security bugs. In those cases, please go through the process
+outlined on that page and do not file a public issue.
+
+## Writing Style
+All contributions will be reviewed for both writing style and any code correctness.
+
+## License
+By contributing to this repo, you agree that your contributions will be licensed
+under its license.
Oops, something went wrong.
@@ -0,0 +1,5 @@
+# makeitopen.com: Open Source Learning
+This is the source repo for the makeitopen.com Open Source learning site run by Facebook.
+
+## License
+Most of this site is CC-BY-4.0-licensed, with the exception of any code samples which are licensed under the terms stated in the [F8 App repo](https://github.com/fbsamples/f8app/blob/master/LICENSE).
@@ -0,0 +1,58 @@
+# Site settings
+permalink: /posts/:year/:month/:day/:title/
+title: Building the F8 App with React Native
+tagline: Connecting Facebook's Open Source projects
+fbappid: ""
+gacode: "UA-44373548-14"
+description: >
+ This is a series of tutorials designed to introduce React Native and its Open Source ecosystem in plain English, written alongside the building of the F8 2016 app for Android and iOS.
+baseurl:
+url: http://makeitopen.com
+ghrepo: "facebook/makeitopen"
+
+# Build settings
+gems:
+ - jekyll-feed
+markdown: kramdown
+kramdown:
+ input: GFM
+ syntax_highlighter: rouge
+
+ syntax_highlighter_opts:
+ css_class: 'rougeHighlight'
+ span:
+ line_numbers: false
+ block:
+ line_numbers: true
+ start_line: 1
+
+collections:
+ docs:
+ output: true
+ permalink: /tutorials/:name/
+ support:
+ output: true
+ permalink: /support/
+
+sass:
+ style: :compressed
+
+color:
+ # Provides colour for background of top header of homepage
+ primary: "#dc6f62"
+ # Provides colour for background of elsewhere on site
+ secondary: "#f8f8f8"
+ # A color that will work for buttons laid on top of primary colour
+ light: "#4ea2ce"
+ # Color that will work for text on top of light color
+ lighttext: "#fff"
+ # Color of text in the top header of homepage, must be legible on top of primary color
+ headertext: "#fff"
+ # Color of text on top of the secondary color background
+ bodytext: "#393939"
+ # Background of fixed nav header - headertext color is used for mini logo text
+ nav: "#dc6f62"
+ # Text of links in the nav
+ navtext: "#fff"
+ # Color of link underlines in the main body, and hover background color for links
+ link: "#dc6f62"
@@ -0,0 +1,31 @@
+
+peteroh:
+ full_name: Peter O'Hearn
+ fbid: 100006115543749
+cristianoc:
+ full_name: Cristiano Calcagno
+ fbid: 1184023671
+ddino:
+ full_name: Dino Distefano
+ fbid: 100003081070147
+shb:
+ full_name: Sam Blackshear
+ fbid: 3904246
+jrm:
+ full_name: Jeremy Dubreil
+ fbid: 535764144
+akotulski:
+ full_name: Andrzej Kotulski
+ fbid: 100000253156179
+martinoluca:
+ full_name: Martino Luca
+ fbid: 1006790910
+irp:
+ full_name: Irene Papakonstantinou
+ fbid: 100003814237180
+dulmarod:
+ full_name: Dulma Rodriguez
+ fbid: 1355558869
+jul:
+ full_name: Jules Villard
+ fbid: 100007156126884
@@ -0,0 +1,33 @@
+- title: Core
+ items:
+ - title: React
+ link: http://facebook.github.io/react/
+ - title: React Native
+ link: http://facebook.github.io/react-native/
+- title: Data
+ items:
+ - title: Flux
+ link: http://facebook.github.io/flux/
+ - title: GraphQL
+ link: http://graphql.org/
+ - title: Relay
+ link: http://facebook.github.io/relay/
+ - title: Redux
+ link: http://redux.js.org/
+- title: Tools
+ items:
+ - title: Flow
+ link: http://flowtype.org/
+ - title: Jest
+ link: http://facebook.github.io/jest/
+ - title: Nuclide
+ link: http://nuclide.io/
+- title: Parse
+ items:
+ - title: Parse Server
+ link: https://github.com/ParsePlatform/parse-server
+ - title: Parse Dashboard
+ link: https://github.com/ParsePlatform/parse-dashboard
+
+
+
No changes.
@@ -0,0 +1,7 @@
+- title: Building the F8 App
+ items:
+ - id: 1-1-planning
+ - id: 1-2-design
+ - id: 1-3-data
+ - id: 1-4-testing
+
@@ -0,0 +1,3 @@
+- type: like_button
+ href: /bistro/docs/getting-started/
+ text: Get Started
@@ -0,0 +1,19 @@
+buildingf8app:
+ title: Building the F8 2016 App
+ splash: /static/images/f8_app_splash.png
+ preview: /static/images/f8_app_tile.png
+ firstpart: /tutorials/building-the-f8-app/planning/
+ intro: >
+ <p>Every year, as part of the F8 conference, Facebook builds iOS and Android apps that give attendees a schedule for the conference, and let them learn more about the talks and speakers. The apps have also provided reminders for upcoming talks and ad-hoc announcements to attendees.</p>
+
+ <p>This year, we wanted to not only release the source code, but also to produce a series of tutorials. These were designed to introduce React Native and its Open Source ecosystem in plain English. </p>
+
+ <p>This tutorial series has been written during the app's development. Elements, such as code samples, will continue to evolve and improve over time after the app has been released. Comments and feedback are welcome via <a href="https://github.com/facebook/makeitopen/issues">GitHub issues</a>. The tutorials are designed to be readable individually, but we recommend reading through in sequence.</p>
+ items:
+ - id: 1-1-planning
+ - id: 1-2-design
+ - id: 1-3-data
+ - id: 1-4-testing
+ - id: 1-A1-local-setup
+ - id: 1-A2-relay
+ - id: 1-A3-windows
@@ -0,0 +1,61 @@
+---
+pageid: 1-1-planning
+series: buildingf8app
+partlabel: Part 1
+title: Planning The App
+layout: docs
+permalink: /tutorials/building-the-f8-app/planning/
+intro: >
+ In this first part, we're going to talk about how we planned the app, and how and why we picked the stack of technologies to use.
+---
+
+*This is a series of tutorials designed to introduce React Native and its Open Source ecosystem in plain English, written alongside the building of the F8 2016 app for Android and iOS.*
+
+In this first part, we're going to talk about how we planned the app; in later parts we will share sample code, discuss multi-platform design considerations, analyze the data layer in our app, and explain our testing strategy.
+
+### Switching to React Native
+
+In 2015 the F8 iOS app was built using React Native, but the Android version used native code; in previous years both were built using native iOS and Android code. Since then, React Native has been released for Android, which presented an opportunity to cut the surface area of the app's logic and UI code. Some Facebook teams have seen [around 85% re-use of app code](https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/) when using React Native.
+
+React Native also provides the benefit of being able to quickly prototype visual components in a tight loop with UI designers - something we'll discuss in [part two]({{ site.baseurl }}/tutorials/building-the-f8-app/design/).
+
+So, if we've switched to React Native, what else do we need to consider? Let's start with the content.
+
+### Choosing a Data Layer
+
+The 2014 and 2015 apps both used [Parse Cloud Code](https://parse.com/) as a data backend. Therefore when beginning to plan the 2016 app, Parse had the advantage by allowing re-use of existing data structures and getting started quickly.
+
+There were other reasons for using Parse - much of the content displayed within the app needs to be updated with great frequency, up to and including during the conference itself, and it needs to be updatable without requiring any technical expertise (beyond familiarity with spreadsheet editing, for example). The Parse Cloud Code dashboard was the perfect tool to meet these needs.
+
+Given all this, Parse became the best choice for this app's data backend. In light of the [Parse Cloud Code shutdown announcement](http://blog.parse.com/announcements/moving-on/), we decided to transition to use the newly open-sourced [Parse Server](http://blog.parse.com/announcements/introducing-parse-server-and-the-database-migration-tool/) and [Parse Dashboard](https://github.com/ParsePlatform/parse-dashboard) projects.
+
+As React Native doesn't need to be tightly connected to a data layer, for example development of the UI and app logic in a React Native app can be done with simple mock data. This means that as long as the structure of the data remains the same, you can swap the data source of a fully built app with minimal amounts of adjustment. For the F8 App this meant we could very easily transition from Parse Cloud Code to the open source Parse Server after the app had already been developed. We'll cover this more in the [data tutorial]({{ site.baseurl }}/tutorials/building-the-f8-app/data/).
+
+### Data Access with React Native
+
+To get Parse and React Native working together, there is an existing [Parse + React package](https://github.com/ParsePlatform/ParseReact) that provides the necessary binding tools, but there was a problem - due to the vagaries of conference wi-fi and connectivity, the F8 app must be able to work offline. Since Parse + React did not support offline syncing of data when the F8 app was being built, so we had to construct our own offline support.
+
+There was another factor in making this decision - team size. Relay, for example, would be more appropriate for a larger team working at scale, but the F8 app was being developed by one person, with a few others in support for design. This has a big influence on the type of data access method you use in an app.
+
+What about [GraphQL](http://graphql.org/) and [Relay](https://facebook.github.io/relay/)? While they work extremely well with React Native, Relay did not ([at the time](https://github.com/facebook/relay/wiki/Roadmap#in-progress)) have built-in support for offline usage, and GraphQL wasn't supported out of the box by Parse. Building the app using them would have required building APIs for GraphQL-Parse, and hacking together an offline storage method for Relay.
+
+GraphQL server setup was also relatively complex for one person with a short deadline. Bearing in mind that when the app was being developed for release in the app stores, we wanted the simplest and fastest options, what other choices were there?
+
+Given the above, [Redux](https://github.com/rackt/redux) was the best choice for the app. Redux offers a simple implementation of the [Flux architecture](https://facebook.github.io/flux/), providing more control over how the data can be stored and cached, essentially enabling the app to sync one-way from Parse Cloud.
+
+For the app's store version, Redux provided the best balance of functionality and ease of use for this app. After the app was released, we revisited this and built some usage of Relay and GraphQL into parts of the app, and we'll cover that transition in the [Relay and GraphQL Addendum](tutorials/building-the-f8-app/relay/).
+
+### Our Development Stack
+
+With React Native as our chosen app framework, and Redux used for the data layer, we needed to pick some supporting technologies and tools:
+
+* The open-sourced [Parse Server](https://github.com/ParsePlatform/parse-server) provided data storage - running on [Node.js](https://nodejs.org/en/).
+* [Flow](http://flowtype.org/) was enabled to catch typing errors in our React Native JavaScript code.
+* Unit tests for the [Jest framework](http://facebook.github.io/jest/) were written for more complex functions.
+* We used the [React Native Facebook SDK](https://github.com/facebook/react-native-fbsdk) for quick iOS and Android access to Facebook integration.
+* We used Facebook's [Nuclide](http://nuclide.io/) editor on OSX with its [built-in support for React Native](http://nuclide.io/docs/platforms/react-native/).
+* We used use git for version control, and stored progress on [GitHub](https://github.com/fbsamples/f8app).
+
+There are some additional small packages we used that we'll highlight as we go through each tutorial.
+
+*Before you continue with later sections, we recommend you learn the basics about [React.js from the project's own tutorial](http://facebook.github.io/react/docs/tutorial.html) - specifically its [concept of modular components](http://facebook.github.io/react/docs/thinking-in-react.html#step-1-break-the-ui-into-a-component-hierarchy) and [JSX syntax](http://facebook.github.io/react/docs/jsx-in-depth.html). Then [follow React Native's introductory tutorial](http://facebook.github.io/react-native/docs/tutorial.html#content) which will show you the basics about applying this to mobile apps.*
Oops, something went wrong.

0 comments on commit 4a2931a

Please sign in to comment.