Code Monkey home page Code Monkey logo

Comments (11)

andygup avatar andygup commented on May 22, 2024 3

@kgs916 I've seen that error before when trying to run a require statement in the main process.

I haven't tried esri-loader in Electron, but in a few prototypes that I built I didn't seem to need it.

Here's a simple example you can try out really fast using electron-quick-start.

Run the following commands in console:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

The quickstart app should launch. If it does then control-c in the console to exit the app.

Change the index.html file to this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <script src="https://js.arcgis.com/4.3/"></script>
  </head>
  <body>
    <h1>Hello World Part 2!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <div id="viewDiv"></div>

  </body>

  <script src="index.js"></script>
  <script>
    // You can also require other files to run in this process
    require('./renderer.js')
  </script>
</html>

And create index.js and copy the following content in:

require([
     "esri/Map",
     "esri/views/MapView",
     "dojo/domReady!"
 ], function(Map, MapView) {

     console.log("Require() loaded.");

     var map = new Map({
         basemap: "streets"
     });

     var view = new MapView({
         container: "viewDiv",
         map: map,
         zoom: 4,
         center: [15, 65]
     });

 });

The last step is to run npm start again and you should see a map.

image

from esri-loader.

TheKeithStewart avatar TheKeithStewart commented on May 22, 2024 1

I have updated my example at https://github.com/kgs916/electronMap to include the change to the esri-loader. It is now working correctly both in and outside of Electron.

from esri-loader.

TheKeithStewart avatar TheKeithStewart commented on May 22, 2024 1

@tomwayson

I like the name. I have renamed the repo to ng-cli-electron-esri and updated it to use the latest esri-loader. Thanks for getting release out there!

One more change that I want to make to this example before I consider it good-to-go is to use the angular2-esri-loader so that it matches the example gist. I've submitted a PR to update the angular2-esri-loader to the latest esri-loader as well tomwayson/angular-esri-loader#13.

from esri-loader.

tomwayson avatar tomwayson commented on May 22, 2024

@kgs916

First, let me start by saying that I've never created an electron app that uses the ArcGIS API.

I believe @odoe has.

Based on that error, it looks to me like window.require is Node's require. What I suspect is happening is that when you call load() (thank you for providing source btw) that it calls isLoaded() which sees that require() is defined and says, yeah, it's already loaded.

I did a little searching, and I came upon @odoe's suggestion to rename node's require before loading the JSAPI: https://geonet.esri.com/thread/160978#comment-623946 I would try just renaming require() to nodereq() and then using that where you'd ordinarily use require() for node modules, maybe just here?

Can you try that?

from esri-loader.

tomwayson avatar tomwayson commented on May 22, 2024

Yeah, I've been wondering about the value of esri-loader in an electron app. I'm guessing the reaons to use it is b/c you have source that uses imports/exports that is getting transpiled into code that runs in electron.

In that case, I wonder if using the Exclude and Require pattern would be a better solution. You could trade the run time complexity introduced by esri-loader for the the build time complexity of configuring webpack (or whatever bundler you're using) to exclude the esri modules and output an AMD bundle that would be something you could use i @andygup's above example. Presumably you are building a desktop application and therefore the initial load time should not be as great a concern, so the benefits of using esri-loader (like lazy loading) should not be as important, right?

from esri-loader.

andygup avatar andygup commented on May 22, 2024

RE: using imports/exports so true and a good point so thanks for calling that out. It does depend on how you are building the app. My overly simple, single page web app above is definitely not a one-size-fits-all solution.

RE: dedicated loader versus Exclude and Require...hmmm good question, and I think either pattern could actually work. The cool thing about Electron is you can use it with your favorite JavaScript framework such as Angular, Vue, React, Ember etc. It's all V8 JavaScript Engine under the hood. So, the pattern you use pretty much depends on your needs, likes, requirements, skillz and tolerances.

RE: load times. The nice thing about Electron is the shell that loads the app is pretty lightweight and fast, so as you mentioned it seems reasonable that you may have a little more wiggle room for module loading that might not exist in a full-blown browser-based app. As for which pattern is best, it may actually take some A/B testing to compare dedicated loader versus exclude and require, or any other pattern that developer comes up with.

From an Electron standpoint and with respect to the error above, the real key to app happiness is to carefully separate the Renderer processes from the Main process. The Renderer handles all the .html, .css and .js goodness. Bundling modules, transpiling etc for the Renderer works just like it does in non-Electron apps. For example, Electron even comes with it's own compiler.

from esri-loader.

TheKeithStewart avatar TheKeithStewart commented on May 22, 2024

@tomwayson and @andygup, thanks for all the great info!

I would like to avoid the "Exclude and Require pattern" if I can because I am using the Angular CLI and there is very limited access to the webpack build process to make the necessary changes.

I managed to get this working with the Angular CLI making a very small change to the esri-loader. I created a pull request with the change: #22. I tried this out both inside and outside of Electron and it worked well. I can create an example demonstrating this as well if needed I just ran out of time this morning to get that pulled together.

from esri-loader.

tomwayson avatar tomwayson commented on May 22, 2024

Resolved in #22

from esri-loader.

tomwayson avatar tomwayson commented on May 22, 2024

@kgs916 if you update your electronMap example to use the v1.0.0 let me know and I'll include it in the examples.

from esri-loader.

TheKeithStewart avatar TheKeithStewart commented on May 22, 2024

@tomwayson I'm thinking about renaming electronMap to something a bit more descriptive. What do you think of ng-cli-electron-esri-loader? To long?

I was also thinking to add an npm script to esri-angular-cli-example that would allow for it to be run in Electron. This would make for a much more compelling example of JSAPI running in Electron. What do you think?

from esri-loader.

tomwayson avatar tomwayson commented on May 22, 2024

What do you think of ng-cli-electron-esri-loader?

Maybe just ng-cli-electron-esri?

thinking to add an npm script to esri-angular-cli-example that would allow for it to be run in Electron

Go for it!

from esri-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.