New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add React and an example component #790

Merged
merged 8 commits into from Dec 2, 2018

Conversation

4 participants
@nicksellen
Copy link
Member

nicksellen commented Oct 30, 2018

Proposed Changes

  • add react just to see how it works/feels

Testing Instructions

  • run up as normal
  • look on profile page
  • the "Member since..." and "Online..." boxes on the left are rendered with a react component!

It's just a proof of concept to see how it integrates. That particular component has a load of other stuff too, and maybe not worth switching it over, but yeah, just gives an example. Seems quite nice!

@guaka guaka added the in progress label Oct 30, 2018

@nicksellen nicksellen changed the base branch from webpack to master Oct 30, 2018

@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Nov 2, 2018

Exciting! Is this something to consider or use in the new client PRs already? Is the idea of using React (instead|on top) of AngularJS mature?

@simison

This comment has been minimized.

Copy link
Member

simison commented Nov 3, 2018

Is the idea of using React (instead|on top) of AngularJS mature?

Kinda as this PR well proves; that said, there are still unknowns regarding routing and data fetching — especially the latter one will be important to figure out sooner than later but we might be able to work our way around it for a while by using Angular app as an app-shell and limiting react only to components inside the app, basically having tons of render-trees all over the place.

Is this something to consider or use in the new client PRs already?

Definitely. It would be good to get some "framework" for doing this in place first with tiny changes like this.

References list could be an interesting experiment to try with React indeed, but only if it doesn't significantly slow us down shipping references.

@simison simison added the framework label Nov 3, 2018

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 3, 2018

I added a import helper so all react components are automatically imported, from the comment in main.js:

/*
 *  Imports all react components from modules/ and register them as angular components
 *
 *  So if you defined modules/users/client/components/TrustrootsGreeting.component.js as:
 *
 *    export default function TrustrootsGreeting({ name }) {
 *      return <p>Hello {name}, from Trustroots!</p>;
 *    };
 *
 *  It will be available to use in (any) angular  as:
 *
 *    <trustroots-greeting name="'Donald'"></trustroots-greeting>
 *
 *  Uses a webpack require context
 *  See https://webpack.js.org/guides/dependency-management/#require-context
 */

@nicksellen nicksellen force-pushed the react branch 2 times, most recently from c0b8bba to 0987046 Nov 3, 2018

@simison

This comment has been minimized.

Copy link
Member

simison commented Nov 3, 2018

I added a import helper so all react components are automatically imported, from the comment in main.js:

Good idea, although the more explicit imports we can have (even at module level) and less magic around, the clearer dependencies are going to be and easier everything is to grok.

This time convention over configuration (that the modules/users/client/config/users.client.config.js file is) totally makes sense though.

How do you see the path forward later on when we might have components that are very module (or "section") specific, as opposed to being more generic and re-usable?

At what point we could have completely explicit imports and remove importComponents?

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 3, 2018

At what point we could have completely explicit imports and remove importComponents?

In the future :)

I guess the magic component imports are for using them within angular templates, any other use should be explicit import (and will have to be anyway). Doesn't seem much benefit to rewrite all the global style angular files into nice es6 modules with imports just to ditch them later.

Could find a way to rewrite into es6 modules + react at the route level in future perhaps, so one route goes to one react component. A few other patterns to work out though around data fetching, state, etc...

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 4, 2018

Tests weren't working before when using react2angular, but ngreact works fine too (and has more github stars) and was easy to swap in.

I would suggest this is ready, except the example component I created is not complete, or very useful. but also probably not a good idea to merge it without any react components in use, so perhaps either:

  • @mrkvon or someone else wants to start building a real react component and can build on top of this branch (I would favour this option)
  • someone picks a really simple component to implement and we can merge with that one

Both cases would involve removing the one I created for this proof of concept.

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 4, 2018

Also, https://medium.com/@jrwebdev/migrating-an-angular-1-application-to-react-8891ec73d462 has some thoughts, I only skim read it.

I would also suggest to keep react components simple and not try and get too much interaction between react and angular as I think it could quickly get messy, so when in react land I would try and avoid two way bindings, much/any interaction with the angular controller, using angular services, etc...

So probably don't try and pass whole controller objects through to a react component, but just the information that it needs.

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 4, 2018

... ok, well I tried out the second option actually, and implement the volunteering page in react, which involved:

  • using a react component for a route (basically just template: '<volunteering></volunteering>)
  • emitting an event on the application scope (by creating the photo service)

I also added fancy es2018 object spread plugin. It's quite easy to start dropping browser support with some of these things if we don't get the babel options right (e.g. Object.assign() is not supported in ie11).

@simison simison added this to To do in Framework refactor via automation Nov 7, 2018

@simison simison self-requested a review Nov 7, 2018

@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Nov 10, 2018

@nicksellen How shall we talk with api? Within angular, or react? Do you have any guidelines to share? I'm interesting in both reading and writing data.

I'm very new to react, done the tutorial and bits of docs only. Also read a nice article about data fetching, which seems to assume full react application.

What is the long-term future picture of frontend? Everything i.e. react + redux? @nicksellen @simison

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 12, 2018

Personally, I would keep it simple/incremental. Try with just fetch (+ polyfill), and if that doesn't have enough features then axios. Basically like that second link.

Although I would suggest to add one additional layer - an API service that abstracts any of the details about using fetch/axios. So inside a component you can use it something like:

// login
await api.auth.login({ username, password })
// fetch contacts
const contacts = await api.contacts.list()

That kind of thing...

At some point it might make sense to use redux, but probably not worth it until it seems useful. The API service will still be used then, as will the components.

If the presentation is getting too mixed up with logic you can always write two components:

  • one stateful component that does API calls, or whatever, passes down props and callback handler functions (e.g. onAddContact)
  • one that purely does presentation, renders only based on props, and calls handler functions to do stuff

@mrkvon mrkvon referenced this pull request Nov 12, 2018

Merged

Create Reference React #827

8 of 8 tasks complete
@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Nov 14, 2018

I'd like to create a link (like ui-sref) from react component; maybe a redirect. I've been struggling with this most of the day. Most recently trying with @uirouter/react-hybrid, facing errors.

@nicksellen @simison Do you have any experience with wiring up routing between react and angular-ui-router? Or ideas?

I'm thinking about using href and forcing a page reload... 😒

@simison

This comment has been minimized.

Copy link
Member

simison commented Nov 14, 2018

I'm thinking about using href and forcing a page reload...

Yeah, depending on where these are it should be safe and best we can have when living with two frameworks.
E.g. moving between tabs on profile page using href can be problematic, but moving from "module to module" it quite safe.
Basically we'll probably hit some issues where we've used "sub views" of ui-router, but I think that's mostly profile pages and maybe modals.

@mrkvon mrkvon force-pushed the react branch from 1068500 to 177e77b Nov 17, 2018

@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Nov 17, 2018

rebased with master

@nicksellen

This comment has been minimized.

Copy link
Member

nicksellen commented Nov 19, 2018

@mrkvon you can access all the angular services from outside angular, e.g.:

var $state = angular.element(document).injector().get('$state');
// Go to messages page ("inbox" state)
$state.go('inbox')
// Get URL for messages page
$state.href('inbox')
// ... or one with params
$state.href('profile', { username: 'peter' })

And there is an example where I use an angular scope outside of angular in photos.services.js (to call $emit).

If you do anything more fancy outside of angular you might need to consider the digest scope to ensure things update in the angular world, but I think it should be ok for these uses.

@guaka guaka removed the in progress label Nov 21, 2018

@simison simison force-pushed the react branch from 177e77b to 2ed1a2c Nov 25, 2018

@simison simison changed the title WIP: React Proof of Concept Add React and an example component Dec 2, 2018

nicksellen and others added some commits Nov 4, 2018

@mrkvon mrkvon force-pushed the react branch from d54323a to b33e40d Dec 2, 2018

@simison simison requested a review from mrkvon Dec 2, 2018

@simison

simison approved these changes Dec 2, 2018

Copy link
Member

simison left a comment

@mrkvon feel free to merge once the about component is either part of the about -angular template or removed for now, since it doesn't implement most of the things for that section.

mrkvon added some commits Dec 2, 2018

move react component profile-view-basics
to be part of the angularjs component, not to replace it
@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Dec 2, 2018

Rebased, moved the react profile-view-basics component and fixed a link.

I'll merge this now. It is the first merge I do into Trustroots master. Feel free to revert if there are any issues.
@simison @guaka

@mrkvon mrkvon merged commit b14f46a into master Dec 2, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

Framework refactor automation moved this from To do to Done Dec 2, 2018

@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Dec 3, 2018

npm run build:prod is failing.

@mrkvon

This comment has been minimized.

Copy link
Member

mrkvon commented Dec 3, 2018

@nicksellen

It's quite easy to start dropping browser support with some of these things if we don't get the babel options right

Is this something you took care of, or is it yet to be done?

mrkvon added a commit that referenced this pull request Dec 4, 2018

guaka added a commit that referenced this pull request Dec 4, 2018

guaka added a commit that referenced this pull request Dec 4, 2018

Revert "Add React and an example component (#790)" (#911)
This reverts commit b14f46a. - the React stuff that breaks production build

@guaka guaka referenced this pull request Dec 4, 2018

Merged

React #912

mrkvon added a commit that referenced this pull request Dec 7, 2018

React (#912)
Merging back the react proof of concept #790. + fixes

* Make the `npm run start:prod` pass.

also
- add react version to .eslintrc
- make dependency versioning in package.json consistent (^ => ~)

* remove firebase from devDependencies (let's do this change in different PR)

@mrkvon mrkvon added the React label Dec 8, 2018

@mrkvon mrkvon referenced this pull request Dec 13, 2018

Open

Admin search users #960

1 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment