Initial content

.gitignore

@@ -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

CNAME

@@ -0,0 +1 @@
+makeitopen.com

CONTRIBUTING.md

@@ -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.

README.md

@@ -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).

_config.yml

@@ -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"

_data/authors.yml

@@ -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

_data/features.yml

@@ -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
+
+
+

_data/nav_docs.yml

@@ -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
+

_data/promo.yml

@@ -0,0 +1,3 @@
+- type: like_button
+  href: /bistro/docs/getting-started/
+  text: Get Started

_data/tutorials.yml

@@ -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

_docs/1-1-planning.md

@@ -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.*