Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

necrotic: Aug 2, 2005; I owe my brother big time for this!

ynohtna posted:

Have you checked out jspm?

quote:

Note that SystemJS is built on top of a draft module loader specification that is subject to change.

Good idea!

# ? Mar 28, 2017 16:05

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 02:02

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

Thanks for the suggestions. It's one of those things I don't want to go through to configure and get working right, but it will be so worth it.

edit: Using JSPM with VS Code looks like it's only giving people trouble. I actually haven't even found anyone being able to use it. Sort of surprising.

LP0 ON FIRE fucked around with this message at 17:07 on Mar 28, 2017

# ? Mar 28, 2017 16:57

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ynohtna posted:

Have you checked out jspm?

Oh boy, maybe I get to skip right over Webpack...

# ? Mar 28, 2017 17:40

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

Too bad the the instructions point to a totally different folder structure than what is available when you install babel-cli. I have no idea what folder inside node_modules I'm supposed to point to.

# ? Mar 28, 2017 19:56

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Thanks ddiddles, Kekekela, ROFLburger, and Maluco Marinero for your recent responses to my posts. All very helpful. Coming along. JS ecosystem anxiety diminishing slightly.

# ? Mar 29, 2017 03:42

Dominoes: Sep 20, 2007

Dominoes fucked around with this message at 14:37 on Mar 30, 2017

# ? Mar 30, 2017 14:16

necrotic: Aug 2, 2005; I owe my brother big time for this!

Isn't it import React from 'react'? Not super familiar with TS.

# ? Mar 30, 2017 14:38

Dominoes: Sep 20, 2007

Turns out you need to add the react script before react-dom. The JS economy feels confusing if you don't use Node, since most guides assume you're using it. Next troubleshooting issue: React seems to block elements I've added in JS that aren't from react; specifically, if I render something to an element, nothing else I put in that element shows up, including things added prrior. I get the impression you're not supposed to mix+match like this, but this makes integrating it into an existing app seem not worthwhile. Is there any way around this?

edit: Looks like it's blocking all other elements in the element we're rendering to, including other react ones...

So let's say I add things to the DOM with JS or Jquery or W/E. I'd like to try React, since it has nicer syntax and is less awkward when inserting elements. How do I convert this:

JavaScript code:

function addLine(tbody: HTMLElement, goId: number, lineId: number) {
    let row = $("<tr class='line'></tr>").appendTo(tbody)
    row.attr('id', idPrefix + "line")  // For finding next go num.
    // A whole bunch of cells like this
    let takeoffCell = $('<td></td>').appendTo(row)
    let takeoffInput = $('<input type="time" class="form-control takeoff" value=' + takeoff + '>').appendTo(takeoffCell)

    let landCell = $('<td></td>').appendTo(row)
    let landInput = $('<input type="time" class="form-control land" value=' + land + '>').appendTo(landCell)

    $('<td><input type="text" class="form-control notes" value=' + notes + '></td>').appendTo(row)
}

into this, but allowing more than one row? Guides online indicate I need to re-structure things, but pretend I'm an idiot.

code:

function addLine(tbody: HTMLElement, goId: number, lineId: number) {
     let ReactRow = React.createClass({
        render: function() {
            return (
            <tr className='line'>
                <td><input type="time" className="form-control takeoff" value={takeoff}></td>
		<td><input type="time" className="form-control land" value={land}></td>
                <td><input type="text" className="form-control notes" value={notes}></input></td>
            </tr>
        }
    })	
    ReactDOM.render(<ReactRow/>,  document.getElementById("my-div"))
}

Dominoes fucked around with this message at 18:17 on Mar 30, 2017

# ? Mar 30, 2017 15:05

geeves: Sep 16, 2004

Dominoes posted:

The JS economy feels confusing if you don't use Node, since most guides assume you're using it.

Is there a well-written guide on how to get started with Node / Bower? More so on the Bower end as we don't use node.js.

Or is there something other than Bower? Or is this a Grunt / webpack thing to combine all of our JS dependencies? There's 50 tools out there and looking at the JS community it's maddening coming from a community that basically has 3 solid, well developed tools for building an application (Gradle, Maven and Ant).

The dev who introduced us to all of this a couple of years ago just did a really piss poor job of it because all he really wanted was grunt watch. He basically would install packages via bower then just copy them into our repository instead of actually using its process. We're well behind the times and I've been knee deep in moderizing our Java build process and I want to continue this on the front end side of things.

You're correct about every React / Redux just making assumptions and not at least writing, first you need to install X - follow these instructions on this site or something.

# ? Mar 30, 2017 22:12

ROFLburger: Jan 12, 2006

I think it's more appropriate to use jQuery for your DOM manipulation rather than creating a new React DOM for each table record (or whatever other elements) and rendering them individually. React is more suited housing an "application", its children, and state. You could create a new React DOM for your entire table and handle the pagination, records, and ajax requests from within if you really wanted to. If you do that, you'll need to avoid touching any of it with jQuery though.

When you say

quote:

I'd like to try React, since it has nicer syntax and is less awkward when inserting elements

and

quote:

but this makes integrating it into an existing app seem not worthwhile

It makes me think perhaps you're using the wrong tool for this job?

ROFLburger fucked around with this message at 22:22 on Mar 30, 2017

# ? Mar 30, 2017 22:20

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

Turns out you need to add the react script before react-dom. The JS economy feels confusing if you don't use Node, since most guides assume you're using it. Next troubleshooting issue: React seems to block elements I've added in JS that aren't from react; specifically, if I render something to an element, nothing else I put in that element shows up, including things added prrior. I get the impression you're not supposed to mix+match like this, but this makes integrating it into an existing app seem not worthwhile. Is there any way around this?

edit: Looks like it's blocking all other elements in the element we're rendering to, including other react ones...

So let's say I add things to the DOM with JS or Jquery or W/E. I'd like to try React, since it has nicer syntax and is less awkward when inserting elements. How do I convert this:
JavaScript code:
function addLine(tbody: HTMLElement, goId: number, lineId: number) {
    let row = $("<tr class='line'></tr>").appendTo(tbody)
    row.attr('id', idPrefix + "line")  // For finding next go num.
    // A whole bunch of cells like this
    let takeoffCell = $('<td></td>').appendTo(row)
    let takeoffInput = $('<input type="time" class="form-control takeoff" value=' + takeoff + '>').appendTo(takeoffCell)

    let landCell = $('<td></td>').appendTo(row)
    let landInput = $('<input type="time" class="form-control land" value=' + land + '>').appendTo(landCell)

    $('<td><input type="text" class="form-control notes" value=' + notes + '></td>').appendTo(row)
}
into this, but allowing more than one row? Guides online indicate I need to re-structure things, but pretend I'm an idiot.
code:
function addLine(tbody: HTMLElement, goId: number, lineId: number) {
     let ReactRow = React.createClass({
        render: function() {
            return (
            <tr className='line'>
                <td><input type="time" className="form-control takeoff" value={takeoff}></td>
		<td><input type="time" className="form-control land" value={land}></td>
                <td><input type="text" className="form-control notes" value={notes}></input></td>
            </tr>
        }
    })	
    ReactDOM.render(<ReactRow/>,  document.getElementById("my-div"))
}

This...is just not how React works.

Have you worked through the official React tutorial?

React isn't really something you just drop in to replace jQuery. They're completely different things.

# ? Mar 30, 2017 23:12

Dominoes: Sep 20, 2007

Thx dudes. I've been using the Codeacadmy tutorial, which is mostly contextless JSX syntax.

# ? Mar 30, 2017 23:21

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

Thx dudes. I've been using the Codeacadmy tutorial, which is mostly contextless JSX syntax.

One of the best things about React is that the documentation is small and easy to understand. However, it's a little difficult to put myself in the shoes of someone who is not real familiar with modern web development so it might not be that way for you...but I'd definitely recommend you giving it a try.

# ? Mar 30, 2017 23:39

Dominoes: Sep 20, 2007

We're python bros. I'm making a web site that's hooked into a pretty complicated database. It has a number of simple pages to view and edit the info; mostly Django MVC-style, with some neat little JS/JQuery interactions.

One part of the site is very different... it's a complex UI with all sorts of things going on, and all the calcs handled front-end in JS (database models are passed through the template in JSON). Dynamically adding/deleting elements, dragging things around, fancy calculations in the background etc. It's coming along quite well, and I switched to Typescript after realizing how easy PyCharm makes compiling it; learned to ignore the bower/NPM/node chaff the usual tutorials lead you down. The type-safe stuff feels like MyPy, which I love (Although it's awkward when dealing with DOM elements). For-of loops, map/filter, arrow funcs, and lodash fix most of the things I don't like about JS.

React sounds like it would be a good fit for the complex part of the site, and I'm mostly looking to it as an excuse to learn and see if I like it, or to get a feel for when it's appropriate. It's come with glowing reviews from a number of people, including yourself. I just have no idea how to use it. Working with the DOM feels hacky, so I figure the JSX could help. Ie I have a lot of cases where I'm serializing data in Element IDs, which I was hoping React/JSX could fix. And of the two create-element code examples I posted above, I think the JSX one looks nicer.

Dominoes fucked around with this message at 23:51 on Mar 30, 2017

# ? Mar 30, 2017 23:45

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

React is great, I'm just not sure you're gaining anything by avoiding NPM...mainly because you're severely constraining your sources of help by doing so.

You also just need to really dig into the React docs and tutorial because what you demonstrated above isn't how React works. For example, you just call ReactDOM.render one time for your whole application.

# ? Mar 30, 2017 23:59

Dominoes: Sep 20, 2007

Thermopyle posted:

You also just need to really dig into the React docs and tutorial because what you demonstrated above isn't how React works. For example, you just call ReactDOM.render one time for your whole application.

Going to dig into that next from your rec!

Why should one use a backend framework for front-end work?

# ? Mar 31, 2017 00:04

ROFLburger: Jan 12, 2006

When you say backend framework, what are you referring to, exactly? NPM?

# ? Mar 31, 2017 00:09

Dominoes: Sep 20, 2007

Node.js

# ? Mar 31, 2017 00:26

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

Why should one use a backend framework for front-end work?

I'm going to paper over some differences in the following.

So, basically, Node is a javascript engine just like the javascript engine in your browser, only it doesn't have a DOM.

This means that stuff developed for Node will also run in the browser.

One of the important differences between Node and the browser is that Node supports modules and a package repository (npm), whereas the best you can do in the browser is layer in a bunch of script tags. However, a bunch of script tags suck for a lot of reasons.

Someone figured out that you can write your frontend with modules and then use a tool (webpack and others) to give you modules on the frontend. NPM is a package manager for node and for frontend development.

This doesn't just mean you can install other people's packages, but more importantly (to me at least) is that you can use modules with your own code. While developing, you develop just like you would in Python...you have multiple files and multiple folders and you can import from them. As far as you know while developing you're not developing in the terrible javascript environment that is the browser, you're developing in a sane environment that lets you have multiple modules.

You can even do an equivalent of python packages by putting a bunch of modules in a folder and then creating an index.js file in that folder that imports what you want as the "public" api of that package into the index.js.

Dominoes posted:

Node.js

You don't need Node.js for the frontend other than the fact that NPM requires node.

# ? Mar 31, 2017 00:26

Dominoes: Sep 20, 2007

Thanks a lot!

Trying to get npm working and running into the issue of require not working. It looks like browserfy/webpack are needed to make this work, via a build step. How does this work with PyCharm's auto-compiling? NPM's import system does seem nicer than global vars/funcs via script tags, but I'm trying not to dive down too deep of a rabbit hole when simple can suffice.

If the require syntax were built-in, npm modules appear a clear winner over <script> tags, but it looks like getting it working is going to complicate this more than its worth.

Dominoes fucked around with this message at 10:40 on Mar 31, 2017

# ? Mar 31, 2017 00:30

necrotic: Aug 2, 2005; I owe my brother big time for this!

Use create-react-app to get going. It'll setup all the things for you.

# ? Apr 1, 2017 16:25

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

Thanks a lot!

Trying to get npm working and running into the issue of require not working. It looks like browserfy/webpack are needed to make this work, via a build step. How does this work with PyCharm's auto-compiling? NPM's import system does seem nicer than global vars/funcs via script tags, but I'm trying not to dive down too deep of a rabbit hole when simple can suffice.

If the require syntax were built-in, npm modules appear a clear winner over <script> tags, but it looks like getting it working is going to complicate this more than its worth.

necrotic posted:

Use create-react-app to get going. It'll setup all the things for you.

This is the correct thing to do.

As a bonus, you'll also get to use ES6 import statements instead of require.

# ? Apr 1, 2017 16:30

Dominoes: Sep 20, 2007

Looks like TS includes import from ES6.

JavaScript code:

import _ from 'lodash'

Uncaught ReferenceError: exports is not defined

# ? Apr 1, 2017 23:23

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

Dominoes posted:

Looks like TS includes import from ES6.
JavaScript code:
import _ from 'lodash'
Uncaught ReferenceError: exports is not defined

iirc that means it doesn't have a default export so you have to do this

JavaScript code:

import { _ } from 'lodash'

# ? Apr 2, 2017 13:38

Dominoes: Sep 20, 2007

Still same error.

I appreciate all the help you guys have been giving me with my noob questions. I'm not having any issues with the code itself or making my program work, but I'm struggling with the ecosystem.

Dominoes fucked around with this message at 14:11 on Apr 2, 2017

# ? Apr 2, 2017 14:00

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Dominoes posted:

Still same error.

I appreciate all the help you guys have been giving me with my noob questions. I'm not having any issues with the code itself or making my program work, but I'm struggling with the ecosystem.

I think you still need to import the types from lodash explicitly. See first answer here: http://stackoverflow.com/questions/34660265/importing-lodash-into-angular2-typescript-application

# ? Apr 2, 2017 14:14

Dominoes: Sep 20, 2007

AFAIK, that only prevents (non-breaking) Typescript errors.

# ? Apr 2, 2017 14:19

hooah: Feb 6, 2006; WTF?

I've been working through this React/Redux course on Udemy, and things were going fine until our power went out and took my desktop with it. When I rebooted, I couldn't get the webpack server to start with npm start. When I tried, I got this message:

code:

    > redux-simple-starter@1.0.0 start C:\Users\Ben\Google Drive\version-control\Red                           uxSimpleStarter
    > node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 8082
    module.js:471
        throw err;
        ^
    Error: Cannot find module 'open'
        at Function.Module._resolveFilename (module.js:469:15)
        at Function.Module._load (module.js:417:25)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (C:\Users\Ben\Google Drive\version-control\ReduxSimpleStarter\node_modules\webpack-dev-server\bin\webpack-dev-server.js:5:12)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv "F:\\Programs\\nodejs\\node.exe" "F:\\Programs\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
    npm ERR! node v6.10.1
    npm ERR! npm  v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! redux-simple-starter@1.0.0 start: `node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 8082`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the redux-simple-starter@1.0.0 start script 'node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 8082'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the redux-simple-starterpackage,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 8082
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR!     npm bugs redux-simple-starter
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR!     npm owner ls redux-simple-starter
    npm ERR! There is likely additional logging output above.
    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\Ben\Google Drive\version-control\ReduxSimpleStarter\npm-debug.log

Any idea what happened? I've tried re-cloning the project as well as un- and re-installing node.js, but no dice.

This is on a Windows 10 machine, if it matters. Commands are in the Git Bash shell.

Edit: well poo poo. A second re-clone got me up and running. :wtf:

# ? Apr 3, 2017 02:51

Dominoes: Sep 20, 2007

Thermopyle posted:

You also just need to really dig into the React docs and tutorial because what you demonstrated above isn't how React works. For example, you just call ReactDOM.render one time for your whole application.

Resolved after reading the example tutorial. Root cause: My approach was event (button click or load from DB) → function → Add new element to DOM. With React, the appropriate way is event → add react component or JSX to a state array of its parent component.

# ? Apr 3, 2017 05:01

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

hooah posted:

Any idea what happened? I've tried re-cloning the project as well as un- and re-installing node.js, but no dice.

This is on a Windows 10 machine, if it matters. Commands are in the Git Bash shell.

Edit: well poo poo. A second re-clone got me up and running.

Any time you get an error in node_modules, either delete the whole directory or rename it to _node_modules (which is faster on Windows) and have it get all the packages again because it's actually pretty terrible at figuring out when it needs to update a package and that usually fixes the problem, if everything was previously working.

# ? Apr 3, 2017 15:07

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

hooah posted:

Edit: well poo poo. A second re-clone got me up and running.

You might want to look into using yarn instead of npm. I know what you're thinking..."another goddamn javascript tool?!?!?!". But, it's really not a problem. You just install yarn per the instructions and use it. It works pretty much exactly the same way as npm, except it is way better at handling the dependencies in node_modules.

Moving to yarn is such a seamless transition that you can install a bunch of poo poo with npm, decide to use yarn, use it for awhile, and then switch back to npm with zero hassle. Yarn continues to use your package.json file just like npm does, and npm will use your package.json file as created by yarn, so it's easy.

If you forgot you used yarn (or npm) on a project and start using npm (or yarn) it's no problem, it just works.

# ? Apr 3, 2017 15:17

necrotic: Aug 2, 2005; I owe my brother big time for this!

Dominoes posted:

Resolved after reading the example tutorial. Root cause: My approach was event (button click or load from DB) → function → Add new element to DOM. With React, the appropriate way is event → add react component or JSX to a state array of its parent component.

Yeah with React you never touch the DOM directly. React is your new DOM.

# ? Apr 3, 2017 16:21

Dominoes: Sep 20, 2007

Love it. Now I've ran into a module I think I need (a react drag+drop to replace the jquery one I'm using) that appears to be usable by import or require. (Only an NPM package; no .js script) Any tips for getting import working? I looked through the create-react-app folder, but I don't know what I'm looking for re: imports. Same "Uncaught ReferenceError: exports is not defined" error as before.

# ? Apr 3, 2017 20:04

Roadie: Jun 30, 2013

Dominoes posted:

Love it. Now I've ran into a module I think I need (a react drag+drop to replace the jquery one I'm using) that appears to be usable by import or require. (Only an NPM package; no .js script) Any tips for getting import working? I looked through the create-react-app folder, but I don't know what I'm looking for re: imports. Same "Uncaught ReferenceError: exports is not defined" error as before.

You might have to do

code:

import * as whatevervar from 'modulename'

which is the workaround for modules that don't do the newer export structure.

# ? Apr 3, 2017 20:08

Dominoes: Sep 20, 2007

Same error.

Tried running webpack with this config on one of the transpiled files, but it breaks with all sorts of errors when I test it.

code:

module.exports = {
    entry: './schedule.js',
    output: {
        filename: 'schedule.js'
    }
};

Dominoes fucked around with this message at 20:21 on Apr 3, 2017

# ? Apr 3, 2017 20:12

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Dominoes posted:

Love it. Now I've ran into a module I think I need (a react drag+drop to replace the jquery one I'm using) that appears to be usable by import or require. (Only an NPM package; no .js script) Any tips for getting import working? I looked through the create-react-app folder, but I don't know what I'm looking for re: imports. Same "Uncaught ReferenceError: exports is not defined" error as before.

I think it depends a bit on the stack you're using, but if you're on something starting from create-react-app, doing npm install and then importing it should work, see https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency.

Is your tryout on github somewhere? Easiest way to nitpick.

# ? Apr 3, 2017 21:12

Dominoes: Sep 20, 2007

I'll see if I can get the vanilla create-react-app thing working. I can't post the code since it's sort-of-for-work, but I can post a sample of my static folder that has the relevant bits distilled:
Github

I suspect the root cause of this may be I'm cheating? By using the typescript transpiler (wrapped by PyCharm) instead of babel/webpack/etc.

Dominoes fucked around with this message at 23:25 on Apr 3, 2017

# ? Apr 3, 2017 22:24

necrotic: Aug 2, 2005; I owe my brother big time for this!

Yeah the react app thing assumes you are using webpack and babel, it's not setup for typescript at all.

# ? Apr 4, 2017 01:41

necrotic: Aug 2, 2005; I owe my brother big time for this!

This set of scripts may get it going with typescript, but it would still be through webpack/babel. You could still use pycharm, just run npm start to actually compile (it watches for file changes).

https://github.com/wmonk/create-react-app-typescript/blob/master/README.md

# ? Apr 4, 2017 01:50

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 02:02

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Yes, I do all my React work in PyCharm, and I just run npm start in a terminal window.

It probably doesn't seem like it, but I think having PyCharm run your transpiler is only making things more complicated if only because everything you read and everything you use is built around running webpack and letting it watch your files.

# ? Apr 4, 2017 03:58

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »