couchdb-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Robert Kowalski <...@kowalski.gd>
Subject Re: [GSoC 2015][COUCHDB-2214] Dashboard as main page
Date Wed, 01 Apr 2015 19:00:24 GMT
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 <raphaelanne2@gmail.com> 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 <raphaelanne2@gmail.com>
> 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 <raphaelanne2@gmail.com> 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 <raphaelanne2@gmail.com>
> 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/
>
>

Mime
View raw message