Hi Nishani, I wrote a small tutorial last week:
It would be nice if you can finish the tutorial at https://github.com/ryanflorence/react-training/tree/gh-pages/lessons until next friday by following the steps and writing that code. After that, read https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e to get a first impression how the Flux pattern works that we are using. For an overview how Fauxton works, read: http://docs.couchdb.org/en/latest/fauxton/addons.html After that (if you still have time left) take a look on a component that Garren, my coworker refactored from Backbone.js to React: https://github.com/apache/couchdb-fauxton/commit/8cbf95d34a191770cfaadf7df98e07b5652e7602 Please take a look how the data flows from the Components, using the Actions, to the dispatcher at the Store. Feel free to litter everything in the code with console.log to see how state changes and how the data flows. Hint: it is that element: https://cldup.com/4eCHVt9HHt.png If you still have time, just try to create another menu item, called "Dashboard". Take a look at: https://github.com/apache/couchdb-fauxton/blob/master/settings.json.default#L8 https://github.com/apache/couchdb-fauxton/tree/master/app/addons/config to get a first idea how to do that. Some background information: base.js - the starting point of our module. basic configuration is done here Question: what is `base.js` used for in the case of the config module? routes.js - takes care that functions injecting the view into the layout are called depending on the url given Question: What happens if I call `http:localhost:8000/_config` and what happens if you remove the function `apiUrl`? views.js - contains our views - this file contains still a lot backbone views, which we are currently migrating to react. maybe it makes more sense to take a look at one of our react components: https://github.com/apache/couchdb-fauxton/tree/master/app/addons/documents/changes and how they are used currently (as we are migrating to react currently): https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/routes-documents.js#L195 https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/views-changes.js#L31 The Objects are injected into the closures using AMD: https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/views-changes.js#L13-24 assets folder: contains our less which is compiled to css templates folder: contains old backbone.js templates, you will not need them tests folder: contains unit and integration tests, every PR must have unit tests and integration tests. If you never wrote tests, we will explain it to you - it is easy once you wrote your first few ones. Basically you are testing each time that if you put something into a function, the expected result happens. Or that if you take an action, a state has changed. You can run the unit tests using `grunt test` Single tests are run by: ``` grunt test --file="./app/addons/documents/tests/headerSpec.react.js" ``` or in the browser by test group: ``` file:///Users/robert/apache/couchdb-fauxton/test/runner.html?grep=Header%20Controller ``` (change path to your fauxton directory) The corresponding code is: https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/tests/headerSpec.react.jsx and these tests are a good example how to write a simple test for the hello world/hello from nishani-component, example: https://github.com/apache/couchdb-fauxton/blob/master/app/addons/documents/tests/headerSpec.react.jsx#L43-61 First steps: Create a module `dashboard` that gets displayed in the sidebar. The route http://localhost:8000/dash will render a small React component that display "Hello World". If you click on the "Hello World" it ill change the content to: "Hello from Nishani" While we will throw the small component away afterwards we will build upon the other code you created. If you have time left, add a test to one of the test files and test that the component changes the content using our testframework Mocha. Best, Robert On Wed, Apr 1, 2015 at 10:54 AM, Ayola Jayamaha <[email protected]> wrote: > Hi, > > Since by now I have successfully submitted the proposal can you point out > some of the resources / tutorials with regard to the codebase of CouchDB / > Fauxton, Architecture and how it works? > > Also if there exists tutorials on how to create plugins, addons, widgets > with React.js. > > It would help me proceed with the next steps on my proposal. > > Thanks in Advance. > > Best Regards, > Nishani. > > On Fri, Mar 20, 2015 at 9:05 PM, Ayola Jayamaha <[email protected]> > wrote: >> >> Hi All, >> >> I'm Nishani. I'm a Student at University of Moratuwa. COUCHDB-2214 >> Dashboard as main page project interests me as I plan to attempt GSoC 2015 >> particularly due to it's active dev-mailing lists and my previous experience >> with creating dashboards and front-end development. >> >> Under the guidance of Robert Kowalski, Alexander Shorin I successfully >> built it and am ready to proceed with the next steps. They will be to get >> familiarized with Fauxton Code Structure and coming up with a good and >> useful feature list for the dashboard.[1] >> >> I have started writing the proposal and shall share it tomorrow with the >> expectancy of some good feedback that would help me improve. >> >> Looking forward in creating a nicer looking welcome page with useful >> information and summaries preferably with added charting. >> >> Thanks. >> >> [1] >> https://issues.apache.org/jira/browse/COUCHDB-2214?focusedCommentId=14361863&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-14361863 >> >> BR, >> Nishani > > > > > -- > Best Regards, > Ayola Jayamaha > http://ayolajayamaha.blogspot.com/ > > On Wed, Apr 1, 2015 at 10:54 AM, Ayola Jayamaha <[email protected]> wrote: > Hi, > > Since by now I have successfully submitted the proposal can you point out > some of the resources / tutorials with regard to the codebase of CouchDB / > Fauxton, Architecture and how it works? > > Also if there exists tutorials on how to create plugins, addons, widgets > with React.js. > > It would help me proceed with the next steps on my proposal. > > Thanks in Advance. > > Best Regards, > Nishani. > > On Fri, Mar 20, 2015 at 9:05 PM, Ayola Jayamaha <[email protected]> > wrote: >> >> Hi All, >> >> I'm Nishani. I'm a Student at University of Moratuwa. COUCHDB-2214 >> Dashboard as main page project interests me as I plan to attempt GSoC 2015 >> particularly due to it's active dev-mailing lists and my previous experience >> with creating dashboards and front-end development. >> >> Under the guidance of Robert Kowalski, Alexander Shorin I successfully >> built it and am ready to proceed with the next steps. They will be to get >> familiarized with Fauxton Code Structure and coming up with a good and >> useful feature list for the dashboard.[1] >> >> I have started writing the proposal and shall share it tomorrow with the >> expectancy of some good feedback that would help me improve. >> >> Looking forward in creating a nicer looking welcome page with useful >> information and summaries preferably with added charting. >> >> Thanks. >> >> [1] >> https://issues.apache.org/jira/browse/COUCHDB-2214?focusedCommentId=14361863&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-14361863 >> >> BR, >> Nishani > > > > > -- > Best Regards, > Ayola Jayamaha > http://ayolajayamaha.blogspot.com/ > >
