I wonder how did facebook do CI/CD for this project. There's no information in the f8app source code. And I understand that this is just a small project, build within 1 or 2 week. But because it's a great learning resource, cover every technology and decision choice from server to client, I believe it's worth add how CI/CD had been done.

Hi,
I have tried to go to server parse dashboard (http://localhost:4040/apps/F8/), but it hangs there. And when i tried to access (http://localhost:4040), it shows the F8 is unable to connect to server.
Any steps i miss here?

Thanks.

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-A3-windows.html

You can use this issue to ask any questions around the approaches taken.

Hi guys,
While studying f8app, some of the things were not clear to me, like why you wrote some parts the way you did, why are some pieces of code there, what is it for etc. I had a lot of questions, and no way to ask. There is no comments section on the site, and github doesn't have a discussion tab. Maybe I could have posted a question on stackoverflow, but how probable is that the author will see that and respond?

I'm grateful for all the work you did and for sharing the app and making it open, I learned a lot anyway. It just could have been a little better if there was a discussion tab, or comments section.

For example on the Planning the app tutorial (http://makeitopen.com/docs/en/1-1-planning.html)

"part two" -> http://makeitopen.com/_docs/1-2-design.md

The link should be somehow generated to http://makeitopen.com/docs/en/1-2-design.html

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-2-design.html

You can use this issue to ask any questions around the approaches taken.

Please complete the information below:

Where is the problem?

In the third page of the guide Integrating Data with React Native, there are 2 links pointing to (http://makeitopen.com/#containercomponents) which is a broken link, it does not exists.

I guess if they mean to link to:

• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.2ahd3vm0n
• http://redux.js.org/docs/basics/UsageWithReact.html#container-components
• https://egghead.io/lessons/javascript-redux-extracting-container-components-filterlink?series=getting-started-with-redux

What is the problem?

Container components links are broken

Please don't change anything below this point.

• Page requested: /tutorials/building-the-f8-app/data/
• Page requested at: Wed Apr 13 17:45:47 2016
• Doc: Integrating Data with React Native

I can submit a PR to correct both links!

PD: Thanks for the guide, extremely useful and informative!

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-3-data.html

You can use this issue to ask any questions around the approaches taken.

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-4-testing.html

You can use this issue to ask any questions around the approaches taken.

This may or may not be worth doing, but I find part 3 is a rather long piece that goes into a lot of detail into how Flux and Redux work (though a simple understanding of React is assumed in part 2). I wonder if it would suffice to just assume a simple understanding of Flux/Redux or to move these into a separate appendix?

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-1-planning.html

You can use this issue to ask any questions around the approaches taken.

Please complete the information below:

Where is the problem?

• • • Setting up a local instance tutorial - - -

What is the problem?

• • • When you go to import the data it tries to fetch the data from https://api.parse.com/1/classes/${classname}. This site has shutdown public apis. - - -

Please don't change anything below this point.

• Page requested: /tutorials/building-the-f8-app/local-setup/
• Page requested at: Tue Jun 14 10:54:39 2016
• Doc: Running the App Locally

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-A4-translations.html

You can use this issue to ask any questions around the approaches taken.

The flowcharts on the site look great, and I noticed they're actually SVG - would you mind sharing what tools were used to generate them?

(Tried googling for this, but got no results)

Thanks in advance!

Please complete the information below:

Where is the problem?

This tutorial doesn't explain how to properly setup the project for a beginner and I'm not sure why Facebook would make the tutorial for local development instead of making the tutorial for a app thats ready for production. Please update the apps code and production procedure through parse server hosted on a platform like heroku.

• • • eg "The section describing how foo works" - - -

What is the problem?

• • • eg "It doesn't explain that foos are bars" - - -

Please don't change anything below this point.

• Page requested: /tutorials/building-the-f8-app/local-setup/
• Page requested at: Tue Jun 14 10:54:39 2016
• Doc: Running the App Locally

The makeitopen.com title in the README file is pointing to some path in the same repo, which is weird after I cross checked its markdown and it clearly should point to its actual URL.

Please fix this and enlighten me about how this is happening.

When you’re building any kind of app, mobile or web, it can be painful to quickly tweak and adjust UI elements. If an engineer and designer are working together, this can slow the whole process down.

Why it will not be faster then engineer and designer are working together?

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-A1-local-setup.html

You can use this issue to ask any questions around the approaches taken.

E/AndroidRuntime( 7799): FATAL EXCEPTION: main
E/AndroidRuntime( 7799): java.lang.VerifyError: com/facebook/f8/a/c
E/AndroidRuntime( 7799): at com.facebook.f8.F8MainActivity.onCreate(F8MainActivity.java:39)
E/AndroidRuntime( 7799): at android.app.Activity.performCreate(Activity.java:4479)
E/AndroidRuntime( 7799): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1050)
E/AndroidRuntime( 7799): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2188)
E/AndroidRuntime( 7799): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2263)
E/AndroidRuntime( 7799): at android.app.ActivityThread.access$600(ActivityThread.java:145)
E/AndroidRuntime( 7799): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1258)
E/AndroidRuntime( 7799): at android.os.Handler.dispatchMessage(Handler.java:99)
E/AndroidRuntime( 7799): at android.os.Looper.loop(Looper.java:154)
E/AndroidRuntime( 7799): at android.app.ActivityThread.main(ActivityThread.java:4834)
E/AndroidRuntime( 7799): at java.lang.reflect.Method.invokeNative(Native Method)
E/AndroidRuntime( 7799): at java.lang.reflect.Method.invoke(Method.java:511)
E/AndroidRuntime( 7799): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:816)
E/AndroidRuntime( 7799): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:583)
E/AndroidRuntime( 7799): at dalvik.system.NativeStart.main(Native Method)

See fbsamples/f8app#22 by @liaohuqiu

For any architecture or concept discussions around the page: http://makeitopen.com/docs/en/1-A2-relay.html

You can use this issue to ask any questions around the approaches taken.

Hi! any plans on making the 2017 app open source? This would surely be very interesting for a lot of folks.

The tutorials currently use somewhat hard-to-read Redux API to apply middleware:

var createF8Store = applyMiddleware(...)(createStore);

function configureStore(onComplete: ?() => void) {
  const store = autoRehydrate()(createF8Store)(reducer);
  persistStore(store, {storage: AsyncStorage}, onComplete);
  ...
  return store;
}

Instead, I would suggest using the modern API that is supported since Redux 3.1:

function configureStore(onComplete: ?() => void) {
  const enhancer = compose(autoRehydrate(), applyMiddleware(...));
  const store = createStore(reducer, enhancer);
  persistStore(store, {storage: AsyncStorage}, onComplete);
  ...
  return store;
}

Note that we pass enhancer as an argument to createStore as opposed to wrapping it.
We also use compose() to use several enhancers in a row.

F8 was built with the regular Navigator, but from https://github.com/ericvicenti/navigation-rfc/blob/master/Docs/NavigationOverview.md it says "Facebook is transitioning from Navigator to NavigationExperimental, which will be the supported navigation library going forward."

Currently, Redux+NavigationExperimental tutorials are quite sparse, so seeing a real-world beautiful use case like the redux-based f8 migrate would be a big help (to me, at least, and I suspect others as well).

It's possible NavigationExperimental isn't yet API-stable enough for a migration, but hopefully this can be a tracking issue for that migration (or the reasons not to migrate), as I'd be very interested in following along in either case.