Question: Any limitations?

[dcworldwide]

Hi, this is a great demo. I'm curious as to whether you would recommend it for production use? Are there any caveats or issues that come to mind?

I'll be looking to port a large app from Flex to the JS api and I was hoping to use React instead of dojo. Thanks

[lobsteropteryx]

That's actually the exact scenario that prompted this work--we were working to port a big Flex app, and settled on React + Redux + TypeScript as a stack.

We've not shipped yet, but are a only a few weeks out at this point; to the best of my knowledge, we haven't run into any real issues. @ryanewtaylor or @cwalv might be willing to chime in here, but I'm pretty confident in it.

I also put together a yeoman generator that uses a similar setup with React, that we've used to build a few components.

Thanks for the message, and if you have any questions, let me know!

[ryanewtaylor]

Sure, I can chime in.

Caveat: I am fairly new to modern JavaScript (i.e., post ES3-ish), TypeScript, React and Redux. The last few years have been spent deep in Flex development on the previously mentioned "big Flex app" (with a .NET back end). My opinions are still forming and they may change.

tl;dr; I love TypeScript, React, and Redux.

Like @lobsteropteryx I am very confident in this stack. Our major hurdles have been learning curve with a team that has varied skills sets and bringing everyone (myself included) up to speed. A proper metaphor might be trying to fly a plane while reading the instruction manual for how to fly it.

We have yet to pin the libs we are using to specific versions as we are in very active development. Some of the tooling is changing at a rapid pace and that can cause issues (we had to pin TypeScript at 1.8.7 for example due to an issue in 1.8.10). That has bit us a little, but there are no showstoppers and the rapid pace is a refreshing change from the complete standstill in the Flex world. Once we get just a little closer to the deadline we'll pin the versions down to their minor versions.

Otherwise, I do feel the stack is production ready.

@dcworldwide hope that helps.

[tomwayson]

I know it's early, but I hope you guys are thinking about putting together a proposal for a user presentation for DevSummit

[dcworldwide]

Thanks @lobsteropteryx @ryanewtaylor for the candid responses. Much appreciated. I definitely appreciate that it hasn't been a simple transition from Flex :)

I've spent the day trying to extend your project to include the following:

• React
• HMR

My changes are in the following fork. Later I'll include React Router and Redux into my fork.

React

With React, I've been able to successfully create a React app that wraps an Esri js map and have validated that drawing / editing work. My initial solution is to essentially wrap the Esri component in a React component, and mount it to the DOM onComponentDidMount. You can see the source here. Is this the best approach that you guys found?

HMR

Getting HMR with webpack has been less fruitful. Did you manage to get it working? Here is what I've found:

When creating a single bundle in UMD format, If I switch from

    <script>
        require(["/bundle.js"], function (bundle) {
            console.log("bundle.js loaded")
        });
    </script>

to

<script src="/bundle.js"></script>

HMR works in this case when rendering only React components with no Esri dependencies. However I couldn't get HMR working when loading the Esri JS API. Webpack can rebuild the React components on file change, but the Webpack Dev Server doesn't to hot update the bundle.

I'd really like to get your thoughts on this. I'm completely out of ideas atm.

[lobsteropteryx]

@dcworldwide: I think your map creation is pretty similar to what we're doing; componentDidMount is definitely what you want.

As far as hot module reloading: We aren't using it. I looked at it early on, and had enough trouble that I just put it aside. Browsersync has been doing everything I want for now.

[dcworldwide]

Good to know. FYI my fork now has HMR working, but it's a little imperfect. I need to add react hot loader to preserve component state. Then I'm confident it will provide a solid user experience.

One thing to note, is that I seem to be able to load all esri js amd modules except for dijit namespace ones.