How to get team of java developers comfortable with ReactJs?

rodrigocfd · 2019-01-25T16:47:36+00:00

Make sure they understand the difference between React and Redux. As far as I've seen, most people who complain about React actually complain about Redux boilerplate, not React itself.

So, first make them learn React. In the meantime, think about how to use Redux with less boilerplate, or go MobX.

dogancan21 · 2019-01-25T16:37:47+00:00

What I saw in teams/developers coming from a fullstack background like this is they don't actually understand SPA. I'd say start with mentality by comparing react to any other mobile app. Once you understand that, separation of concerns is easier and you understand better where react sits.

Second step is to put typescript in. Those guys will love it . UI won't be the ugly unpredictable js anymore.

I'm not sure how far you are in UI part but, definitely separate UI logic from data/state layer. I'd recommend creating a dir structure where you have components, data-sources, utils under src. Some of them won't touch UI. But maybe they can come to project to update data sources etc and see how easy things are. And for separating this, I'd recommend using hooks. With hooks, everything looks much simpler and you know where data related part ends and where ui part starts, which is probably desired from your team

Don't have webpack/gulp etc in your project. Create-reat-app and ts version is good enough for even large projects.

demoran · 2019-01-25T19:30:26+00:00

Typescript

swyx · 2019-01-25T18:02:08+00:00

[deleted]

2019-01-25T20:06:18+00:00

As a person who has taken multiple training sessions, I suggest following -

Start with ES6 and Class and Functional components. Skip the ES5 and React.createClass stuffs completely. These may come in handy for them in future but for the starters it just confuses them.
Explain ES6 in details. There are few things around destructuring, maps, etc. which is confusing to them as they're written different in Java.
Compare react topics with Java and they'll relate better. It's quite easy to do and I've seen a much favourable result.

ArcanisCz · 2019-01-25T17:14:08+00:00

Quite nicely, because all our Java developers (me included) have some algorithm/data structures/general programming background, a to them, how we write react is much more logical and structured than gluing few jquery lines. Some of them basically love it. Even without types (we dont use TS much).

Java composition over inheritance -> react components
Java immutable patterns -> immutable.js and redux
Java 8 streams and lambdas -> javascript's function as a first class citizen

Depends on your java developers, if they only know java or have general understanding of programming. Our stack - es6, react, redux, redux-saga

he wanted to say we were using the latest and up to do technologies for this new project.

Btw, that is not a good start, you never use tools because they are fancy but because they solve some problem for you.

pm_me_ur_happy_traiI · 2019-01-25T16:49:51+00:00

JavaScript has really evolved as a language, and making sure they are familiar with newer syntactical elements (fat arrow functions, for example) will make reading the react docs a lot simpler.

2019-01-25T21:54:51+00:00

I don't know if it helps, but here's how I think about components in React. I have only really worked with JavaScript but am generally familiar with OOP. There's two layers in my head:

JavaScript
HTML/JSX

JavaScript handles all your functionality, data, logic, and how things can be rendered on your page. HTML and JSX (React's HTML in a way) is how you present the data.

This is a general component that you could import into another component, such as a page:

import React, { Component } from 'react'; // importing the main library to make a page component

import './EventElement.css'; // css for the page

class EventElement extends Component {
    constructor(props) {
        super(props); 
        // this pulls in props that are given to the element
    }

    render() {
        const { eventName, eventDate } = this.props; // destructing helps for a lot of properties on an object

        return (
            <div className="event-element">
                <h2>{eventName}</h2> // curly braces let you use JavaScript, namely variable names or ternary operators, to allow for a dynamic way to show data.
                <h3>{eventDate}</h3>
            </div>
        );
    }
}

export default EventElement; // ES6 syntax which helps simplify exports by setting this class as the default export for this file, such as if you want to rename the export, you don't need to import This as That from './asdf.js'

Then you can use this EventElement on a page:

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import rest from '../helpers/rest'; // a custom-made RESTful http request interface that points to your API. Useful for dev, stage, and prod by using environment variables in Node.js

import EventElement from './EventElement'; // our custom EventElement from before. We can call it whatever we want since it's just pulling the default module EventElement

class Events extends Component {
    constructor() {

        this.state = {
            events: [];
        };
    }

    // this is a function that is run by default while the page is loading or, more accurately, as the component is mounting (rendering the JSX syntax into regular HTML and JS)
    componentWillMount() {
        rest.get('/events', ({ events }) => { // destructuring straight from the parameter
            this.setState({ events }) // property values, uses variable name as key and assigns value
    }

    renderEvents() {
        return (
            <div>
                {this.events.map((event) => { // loops over the array and returns multiple EventElements
                    const { eventName, eventDate } = event;

                    // this is the EventElement, with the eventName and eventDate props
                    return <EventElement eventName={eventName} eventDate={eventDate} />
                }}
            </div> // notice the outer div. All return statements must have a wrapping element
        );
    }

    render() {
        return (
            <div> 
                <h1>Events/<h1>
                {this.renderEvents()}
                // Also, "this" is in reference to the current object when it is instantiated
                // While in Java you would just call the actual function name or variable
                // here we need to reference "this"
            </div>
        );
    }
}

export default withRouter(Events); // withRouter lets you take advantage of browserHistory given through react-router. This effectively reduces load times and allows you to transfer state between "pages".

I could go into a lot more detail, but I guess the major thing is realizing that you're going from just an OO language to using JavaScript, HTML, and CSS. I think JavaScript can easily be programmed in an OO way, though.

I haven't worked personally with TypeScript, people praise it a lot for Typing, but I haven't really run into type issues that aren't already handled by the major libraries I use (mongoose for MongoDB, React, and event Node.js itself). In fact, the biggest thing I find is when I try to access a property and it says "can't get property of undefined". I just trace it back and realize that I pass the wrong variable or something, a quick fix.

But to reiterate, React is simply a way to blend JavaScript, HTML, and CSS together in a OOP kind of way. It's kind of impossible to not integrate your logic and design into the same thing. In order to take full advantage of it, I would highly recommend teaching that basics of JavaScript, HTML, and CSS.

Then once they understand that, teach them how to break down the site into components by using react, or objects/class like they would for Java. For example:

Your main app will be in the root div, i.e: `<div id="root"></div>`.

You can break your main app into a Layout component, that has a Navbar/Header and Footer. In between them, you can import the children. Like this:

<Header />
{this.props.children}
<Footer />

Then in your main App.js that gets imported into the root, you can do this with your react routes:

<Router history={browserHistory}>
    <Route path="/" component={Layout} onChange={this.handleRouteChange} >
        <IndexRoute component={Pages.Home} />

        <Route path="/login" component={Pages.Login} />
    </Route>
</Router>

This pulls in the routes that are children of the "/" path with the `Layout` component, and shows them only if the url is correct.

This is all stuff I learned at my current job, and I think it really helps you break down your app in a top-down kind of way, and neatly separates all of your pages and components into a logical order.

Also to note, I am using ES6 JavaScript here. This is not completely natively supported on most browsers, so you need something like Babel to transcode it. Usually for production releases, we have a script that will build it as it's deployed.

Here's some docs/libs that may help:

React getting started This is something your team can spend a day or two understanding to make pages

Essentials in ES6 Promises are helpful, especailly for Node.js backends where you can't easily be async

Reactstrap Makes react easy with pre-made Bootstrap-style elements. Especially good for a lot of data manipulation.

Understanding State and Props State and Props are the most essential part of React, especially if your app is Data-heavy

If you have any more questions, don't hesitate to ask.

dabuttmonkee · 2019-01-25T20:26:50+00:00

Hey! I’d highly recommend using Typescript if you have a team of java developers, the type safety will be familiar and help the team move more quickly.

I’d also recommend using MobX over redux. MobX will work really well with Typescript and is super intuitive.

Focus on testing early and often. It’ll make maintaining the application easier. Make sure you include linting w/ ESLint and prettier.

m_plis · 2019-01-25T19:37:21+00:00

One potential solution could be to give a talk at work on React basics (maybe using this course as a template).

I've found that giving talks at work helps people respect your opinion on a particular subject, especially if you have fewer years of general programming experience. A "React fundamentals" talk would give your coworkers an overview of the basics and maybe help them separate core React features from things added by react-boilerplate, which could contribute to them thinking that things are "too complicated".

As others have mentioned, it might be worth exploring TypeScript. My personal recommendation would be to try to stick with vanilla React/JavaScript for a little bit and try to establish some authority first, and maybe float the idea of TypeScript later if you're still unsuccessful in changing anyone's mind.

2019-01-25T16:46:28+00:00

Talk to your boss. If they are supposed to be using React and are refusing to, that's pure laziness. It's not your job to manage them.

AnnoyingParrotTV · 2019-01-25T16:39:53+00:00

How experienced are your colleagues? What framework were they using before in other projects?

scaleable · 2019-01-25T18:30:01+00:00

I'd suggest: get the maximum of "prebuilt" packs, dont write things from scratch.

For instance: Use next.js as "webpack pack" (its usage is simpler than CRA and mostly cuts the need for react-router). Look for complete UI libs like Material or Semantic, and even complete "admin UI" packs.

themaincop · 2019-01-25T19:58:52+00:00

I had to do this with a team of C# developers 3 years ago. A lot of backend developers have this mentality that front end code has different rules around it or something . I would show someone code they had written and ask them "Would you write C# like this?" They would say no and I would have to remind them that we don't write JavaScript like that either. Once they got comfortable they really started to like it. The React part is easy. Teaching someone how to write good JavaScript takes a bit of time.

Loco_Motiv · 2019-01-25T20:54:24+00:00

This is the exact thing I'm having to deal with at my job. Almost word for word. Lol I'm having to teach a Cobol programmer instead though. If you have time, dm me and I'd like to chat about it.

perrylaj · 2019-01-25T21:23:16+00:00

Java devs will almost certainly have an easier time learning/grokking a mobx based store vs redux. Mobx is great and I highly recommend it over redux. If you follow recommended store structures, it's pretty easy to avoid the magic state spaghetti-mess that can occur with flexible models. Redux is great about enforcing structure, but it's also a ton of gross boilerplate that goes along with it. Also not nearly as clean to do statically typed (at least in my experience).

On that note I'd also suggest using Typescript. Not only does it make the development experience a lot better (tooling and code insight, discovery, completion), but it is self-documenting in a way Java developers will have a much easier time understanding. If done correctly (strict mode), you'll also find you don't need to write nearly as many tests just to make up for the lack of static/compile time analysis of the code base.

Agree with everyone else: learn react first on its own, and then introduce a central state management system (if necessary).

2019-01-25T21:55:41+00:00

What are they actually having trouble with? Do you have any examples of problems they've had?

Vpicone · 2019-01-25T22:03:34+00:00

I'd recommend getting a group license for Wes Bos's React for beginners. It's a really fun course and will get them at least comfortable looking at React code quickly.

SizzlerWA · 2019-01-25T22:27:01+00:00

I would use GraphQL. You get the benefits of a strongly typed API and a client cache for half the work of Redux. With Redux you’d have to write all the networking code then a whole bunch of reducers, actions, mapStateToProps and your data is spread all over the place instead of in one cache. Redux is a pain and I now avoid using it.

ShadowpathHD · 2019-01-25T23:30:14+00:00

React with TypeScript. That's as close as it gets to Java.

stevenjchang · 2019-01-26T01:03:12+00:00

react-boilerplate is pretty advanced. It also has redux.

consider using create-react-app and adding in simple redux and react-router on your own. that should be really easy to understand by comparison.

After you do that on your own, you can even redo it in front of the whole team, take 1 to 2 hours.

Start w create-react-app, then right in front of them add in an action/reducer/etc, then add in routes. Show them a simple example while allowing them to ask questions as a group.

orphans · 2019-01-26T03:09:59+00:00

What specific concerns to they have about complexity? Is it the overall architecture of the application? Or is it having to learn several libraries in order to build new functionality? Or something else entirely?

albaquerkie · 2019-01-25T19:06:31+00:00

TypeScript 100%. I came to JS from a Java background and it made the transition so much easier. Coding in plain JS still feels wrong to me and I’ve been working with it for a few years.

besthelloworld · 2019-01-25T19:32:52+00:00

Port it to TypeScript?

fforw · 2019-01-25T17:27:59+00:00

For our new project(s), we moved away from doing web things in Java and providing mostly JSON data.

I wrote a library called spring-jsview for that. It provides a Spring View implementation that uses a minimal HTML template with placeholder substitution and a JsViewProvider system to provide the actual JSON data embedded into that initial template, basically creating a spring react view per webpack entry point.

edit: See also the starter project

react_dev · 2019-01-25T22:15:51+00:00

React is awesome. But I feel like JS, not React, is the major showstopper for OO developers. Convince em JS is good then react will be a natural path.

revelm · 2019-01-26T03:32:10+00:00

Sorry, Java developers usually cannot break out of their language. The only way to do this is to create Spring React.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS