I am trying to write my own home automation system in javascript. The system should have a UI so that I can access some general controls for it.
Since it requires a UI, I thought "why not make it a fat electron app".
So I am now trying out electron and svelte. But the issue I am running into is that it doesn't look like I am able to import my normal packages for controlling philips hue.
For example if I import philips-hue with
import Hue from "philips-hue";
it immediately throws a ReferenceError: events is not defined and if I try using the package node-hue-api it throws the same error but references url instead of events
This is quite confusing for me since I have used these packages many times before without issues when I am writing a normal node express server.
So I am wondering why it won't work on electron and svelte, and if there is any "quick fix" solutions that solves this issue?
You will need to polyfill the nodejs built-ins, as these do not exist in other environments such as electron.
If you are using webpack for example, you can follow the directions here: https://webpack.js.org/configuration/node
Related
I am making a global library which can be used in any environment (node,browser,es6 modules). For that I am generating a UMD file using Webpack. But how do I handle functions that contradict the opposite environments (Like fetch requests). I started using axios as I found that it works for both browser and node, but faced different problems which I am going to state below.
Directly using Axios in my library: Node gave error that "XMLHttpRequest is not defined".
Specifying "Axios" as Externals in Webpack:: The library starts working fine in Node but now it stops working in Browser. Because Axios is undefined in browser now.
Special Case: I also provide ES6 support for the library by adding module entry in package.json which point to src/index.js. Now, in browser it becomes issue because I am using import axios from 'axios' in my Library file. And since the browser takes it as it is in case of ES6 module (I am talking about when we use <script type='module'>import {func} from "./myLibrary.js" .....</script> ). It becomes an issue because the browser don't work with absolute paths, it requires relative paths. So, is it not possible to make such kind of ES6 support for Browsers? Accessing the same ES6 library in React works fine, because of course it works on top of module bundler and it don't have the same issue as browser(script tag).
So the point is, the more I search on it and try to fix the issues, I am getting more and more issues. Is there any standard way to go about it? Because if there exist something as a UMD file Format, it should be possible to make global libraries. I have only talked about Axios/Fetch in this situtation but I am not sure what other kind of issues might I face as well in other situations.
fetch or XMLHttpRequest are functions that belongs to window browser object. So nodejs cannot have them, node has not a window object. You have to include some module to access the fetch-like API that provides browser.
https://www.npmjs.com/package/node-fetch
I have been reading multiple different articles about what Isomorphic application is, why this type of architecture is better and so forth. But I still have a bit of uncertainty as to what is meant by such term.
How would you define what "Isomorphic Application" is, without going too much into details?
They are, more recently, also called universal. I'm not sure about the whole app being called isomorphic/universal, but you can certainly have parts of the code base that is universal.
Isomorphic/universal code is code that runs on both the client (browser) and on the server (NodeJS). Since they are both JavaScript this something that is possible if:
you do not mention window, document or any other browser-only methods
you do not mention server, fs or any or any other node-only methods.
If you do need to do the above within some code that is meant to be universal, you should wrap it in a function that either mocks the required method within the alternate environment or wrap it in conditionals so that the app doesn't crash.
An example is console.log which will work both within NodeJS and any browser, along with most other es6 methods in modern browsers.
I use build tools (like webpack) to then help create / export functions within individual files so that we then have a bundle like client-app.js which is included in the HTML file and is the browser only js. The server then might start using server-app.js which is the server-only bundle. Both bundles can be created using a lot of the same universal source code.
Hello everyone I am wondering if is possible to run two version of ReactJS on the same page , something similar to jQuery.noConflict().
With a bit of research i have found two interesting things :
Two Reacts Won’t Be Friends
While I’m happy that everybody seems to be converging on NPM in 2015 and NPM wants developers to use it for managing front-end dependencies, it still has rough edges. The biggest problem with using NPM for front-end dependencies is that if two packages specify a library like React as a dependency, they might get two separate copies of React. Even worse, they might get different versions of it. This works fine for something like Node, but not for browser libraries that want to mess with the same global mutable DOM! NPM tried to solve this with peerDependencies but all hell broke loose and they’re backing out.
https://medium.com/#dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#.hfx35f6hl
And an issue on github: https://github.com/facebook/react/issues/1939
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS .
thanks
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS.
You can use Browserify with reactify to load your JS and version of ReactJS without conflicting with another ReactJS version that may be loaded on the page.
More information is available here:
Embeddable JavaScript widget with React
as a total JavaScript beginner, how do I actually develop for it?
I mean, I've seen https://azure.microsoft.com/en-us/documentation/articles/documentdb-programming/ but there was no mentioning of a development environment.
Is there something like a visual studio project template for server-side javascript?
I use node.js so your mileage may vary if you are developing from .NET, but here's what I do:
First of all, I created an npm package documentdb-utils. It is a wrapper for the DocumentDB node.js package that makes it easier to do a bunch of things.
Then, I created npm package documentdb-mock to write tests for my stored procedures. The source code for documentdb-mock includes 4 example stored procedures along with a test suite for each using nodeunit. You can start with these as they exercise most of the server-side API.
After I have them passing my local unit tests, I write integration tests that exercise my system end-to-end including creating any necessary data for each test run. The only problems that I've found here with sprocs that I didn't see in my mocked testing had to do with reaching certain limits... although, documentdb-mock has been upgraded to simulate many of these now also.
I haven't open sourced this yet, but I have also written a parser/rewriter that will embed any require(d) packages into my sprocs before sending them to DocumentDB. This allows me to write and test in a nicely factored way on node.js even using downloaded packages from within my sprocs, but when they get pushed to DocumentDB any dependencies are automatically embedded inside of the function. I'll open source that at some point (probably adding it to documentdb-utils) but I can share it with you now if you desire.
Here are a few tools that I found helpful for development (especially server-side [by which we mean database-side] scripting):
DocumentDB Studio - https://github.com/mingaliu/DocumentDBStudio/releases
Sample Code - https://github.com/Azure/azure-documentdb-js-server/tree/master/samples/stored-procedures
Here is another nice open source tool for exploring data in documentdb:
documentdb.a7pl.us
I wrote a small web app using Nancy. I was originally using ASP.NET hosting, but I decided to try Nancy self hosting so I could deploy the app easily to any Windows machine. This involved replacing my ASP.NET Empty Web Application with a Console Application.
Pretty much everything is working well, but I've run into an issue where using certain window functions, such as alert() or escape(), in the JavaScript editor causes ReSharper warnings.
Here's how it looks in the editor:
I could always disable these warnings (or add window. before every call), but I'm wondering if there's anything I can do to have these functions recognized as if my project were an ASP.NET app.
Edit
If I return to my original project (the ASP.NET app) and type alert, here is what I see:
Could this mean that DHtml.js doesn't get loaded/included for console apps? Is there a way to make that happen?
When you create a web project, ReSharper adds some "hidden" js files to its cache that provide definitions for global objects, including the "Dhtml.js" file you mention. These files aren't added for console applications. There's no decent workaround here - ReSharper's web support is primarily based on the idea that you're in a web project of some kind, so there will be other features that are not enabled due to the fact that you're in a console app project.
However, it looks like it's possible to replicate what ReSharper does to add these files from a plugin - instead of looking to see if the project is a web project, it should look to see if it's a console app that also references Nancy. If so, tell ReSharper to internally reference these "hidden" files. I'd suggest posting a feature request to the Nancy ReSharper plugin project.