Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

M31: Jun 12, 2012

code:

return (
  <div>
    { !wizard.Step1Data ? <Step1/>
    : !wizard.Step2Data ? <Step2/>
    : !wizard.Step3Data ? <Step3/>
    : <Done/>}
  </div>
)

code:

goToNextStep() {
  this.setState({currentStep: <Step2/>})
}

return (
  <div>
    {this.state.currentStep}
  </div>
)

But having properties called step1data and step2data is already suspect

# ? Oct 21, 2016 19:37

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 17:22

Kekekela: Oct 28, 2004

spacebard posted:

Maybe store the form step in state/store instead of checking if the object exists?

Yeah, this is probably what I'm going to do. I'd considered it initially and decided against for retarded reasons I don't fully recall (something along the lines of being more elegant to have the model drive the wizard state but it ended up being anything but elegant)

quote:

But having properties called step1data and step2data is already suspect

Lol should've been more clear, that was just a free handed example, I was trying to be generic. Its actually stuff like order.site, order.customer, etc

# ? Oct 21, 2016 19:55

Kekekela: Oct 28, 2004

M31 posted:

code:

return (
  <div>
    { !wizard.Step1Data ? <Step1/>
    : !wizard.Step2Data ? <Step2/>
    : !wizard.Step3Data ? <Step3/>
    : <Done/>}
  </div>
)

Ah thanks, this might actually clean up the current implementation enough to make it workable for now.

e:

M31 posted:

code:

goToNextStep() {
  this.setState({currentStep: <Step2/>})
}

return (
  <div>
    {this.state.currentStep}
  </div>
)

The wizard's state's being managed by Redux so this wouldn't be a good fit.

Kekekela fucked around with this message at 20:37 on Oct 21, 2016

# ? Oct 21, 2016 19:58

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

I would break it up into two steps

code:

let wizardStep = null;

if (step1) {
 wizardStep = <Step1 />;
} else if (!step1 && step2) {
 wizardStep = <Step2 />
}

return (<div>{wizardStep}</div>);

I really don't like having ternary operators in the return statement.

# ? Oct 21, 2016 20:17

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

What alternate profession do you recommend because I never understand anything in this thread and I feel I never will.

I'm trying, desperately, to maybe try webpack. But even with Lumpy's examples, or this or this,I feel like everything is in Greek and I'd have better luck coding with my forehead hitting the keys. I somehow got a series of specific .js files to concatenate and minify (uglify) to one file. I'd like to get that to gzip as well but... my main issue right now is that I can't for the life of me figure out how to get a bunch of foundation .scss files to output a single, compiled, css file.

Lot of commented out stuff and whatever because I've been redoing this so many times at this point

code:

const path    = require('path');	
const webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const sassLoaders = [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
]
var webpackUglifyJsPlugin = require('webpack-uglify-js-plugin');
//var CompressionPlugin = require("compression-webpack-plugin");


// might need to include wishlist into bundle
module.exports = {
    entry:  {
		global:['./src/countdown','./src/international','./src/mainNav','./src/miniCart', './src/search']
		//countdown:'./src/countdown',
		//international:'./src/international',
		//mainNav:'./src/mainNav',
		//miniCart:'./src/miniCart',
		//search:'./src/search'
	},
    output: {
        path:     'builds',
		// filename: '[name].js'
        filename: 'ug.js',
    },
    module: {
        loaders: [
			{
				test: /\.scss$/,
				//loaders: sassLoaders
				    loader: ExtractTextPlugin.extract(
						'style', // backup loader when not building .css file
						'css!sass' // loaders to preprocess CSS
				)
			}
        ]
    },	
    plugins: [
		new ExtractTextPlugin("style.css"),
        new webpackUglifyJsPlugin({
			cacheFolder: path.resolve(__dirname, 'public/cached_uglify/'),
			debug: true,
			minimize: false,
			sourceMap: false,
			mangle:false,
			output: {
				comments: false
			},
			compressor: {
				warnings: false
			}
        })
//		,
//		new CompressionPlugin({
//            asset: "[path].gz[query]",
//            algorithm: "gzip",
//            test: /\.js$/,
//            threshold: 10240,
//            minRatio: 0.8
//        })
    ]
};

# ? Oct 21, 2016 21:04

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

The Merkinman posted:

What alternate profession do you recommend because I never understand anything in this thread and I feel I never will.

I don't think any of us really do, you just get used to it and move forward.

# ? Oct 21, 2016 21:19

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

I haven't looked in to it at all but I've heard that a major design goal of webpack 2 is to make it less like an exercise in manual obfuscation and more like something a normal human could understand.

# ? Oct 21, 2016 21:37

HaB: Jan 5, 2001; What are the odds?

The Merkinman posted:

What alternate profession do you recommend because I never understand anything in this thread and I feel I never will.

I'm trying, desperately, to maybe try webpack. But even with Lumpy's examples, or this or this,I feel like everything is in Greek and I'd have better luck coding with my forehead hitting the keys. I somehow got a series of specific .js files to concatenate and minify (uglify) to one file. I'd like to get that to gzip as well but... my main issue right now is that I can't for the life of me figure out how to get a bunch of foundation .scss files to output a single, compiled, css file.

Lot of commented out stuff and whatever because I've been redoing this so many times at this point

I can't give you specific help, since I just sat and jacked with it until I got it working, but here's my webpack config:

code:

const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var paths = require('./paths');

module.exports = {
  devtool: 'eval',
  entry: [
    require.resolve('webpack-dev-server/client') + '?/',
    require.resolve('webpack/hot/dev-server'),
    require.resolve('./polyfills'),
    path.join(paths.appSrc, 'index')
  ],
  output: {
    // Next line is not used in dev but WebpackDevServer crashes without it:
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/bundle.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.js', '.json'],
    alias: {
      // This `alias` section can be safely removed after ejection.
      // We do this because `babel-runtime` may be inside `react-scripts`,
      // so when `babel-plugin-transform-runtime` imports it, it will not be
      // available to the app directly. This is a temporary solution that lets
      // us ship support for generators. However it is far from ideal, and
      // if we don't have a good solution, we should just make `babel-runtime`
      // a dependency in generated projects.
      // See [url]https://github.com/facebookincubator/create-react-app/issues/255[/url]
      'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator')
    }
  },
  resolveLoader: {
    root: paths.ownNodeModules,
    moduleTemplates: ['*-loader']
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        include: [paths.appSrc, paths.appSrc + '/components'],
        loader: 'babel',
        query: require('./babel.dev')
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
      },
      {
        test: /\.json$/,
        include: [paths.appSrc, paths.appNodeModules],
        loader: 'json'
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
        include: [paths.appSrc, paths.appNodeModules],
        loader: 'file',
        query: {
          name: 'static/media/[name].[ext]'
        }
      },
      {
        test: /\.(mp4|webm)(\?.*)?$/,
        include: [paths.appSrc, paths.appNodeModules],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'static/media/[name].[ext]'
        }
      }
    ]
  },
  eslint: {
    configFile: path.join(__dirname, 'eslint.js'),
    useEslintrc: false
  },
  postcss: function() {
    return [autoprefixer];
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      favicon: paths.appFavicon,
    }),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
    // Note: only CSS is currently hot reloaded
    new webpack.HotModuleReplacementPlugin(),
    new CaseSensitivePathsPlugin(),
    new ExtractTextPlugin( "bundle.css" ),
    new DashboardPlugin(dashboard.setData)
  ]
};

it's from the React starter, ejected and modified by me to include sass support. Don't forget that loader order matters, and they get applied in reverse order. (as to the sheer dumbness/weirdness of that, I'll refrain from offering an opinion).

# ? Oct 21, 2016 21:58

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

I'm kind of confused about what I'm doing wrong. As I mentioned earlier I'm trying to migrate an existing JS project to Typescript in some incremental manner.

I thought my first order of business should be replacing babel with typescript. As such, I removed the babel loader and added the following as my "last" (and thus actually at index 0 in the loaders array since as just mentioned in the last post, webpack loaders work in reverse order):

{ test: /\.(tsx?|js)$/, loader: "ts-loader" }

My tsconfig.json:

JavaScript code:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
  },
  "include": [
    "src/**/*"
  ]
}

I was expecting a lot of errors for me to work through fixing, but the very first one has me stumped.

code:

ERROR in blah/blah/node_modules/@types/react-dom/index.d.ts 
(9,10): error TS2305: Module ''"blah/blah/node_modules/react/react"' has no exported member 'ReactInstance

There's a few other ones for React-DOM exported members as well.

My guess is that this has something to do with my code using ES6-style module imports and exports maybe?

# ? Oct 21, 2016 22:09

abraham linksys: Sep 6, 2010

shot in the dark, but it's not fixed if you add "allowSyntheticDefaultImports": true to your compilerOptions, is it? there's some weird quirk about TypeScript doing ES6 imports of CommonJS JS modules

# ? Oct 21, 2016 22:37

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

HaB posted:

I can't give you specific help, since I just sat and jacked with it until I got it working, but here's my webpack config:
code:
...
it's from the React starter, ejected and modified by me to include sass support. Don't forget that loader order matters, and they get applied in reverse order. (as to the sheer dumbness/weirdness of that, I'll refrain from offering an opinion).

Also, what's the folder breakdown for that? Maybe my webpack.config.js is looking for scss in the wrong folder.

# ? Oct 24, 2016 14:26

HaB: Jan 5, 2001; What are the odds?

The Merkinman posted:

Also, what's the folder breakdown for that? Maybe my webpack.config.js is looking for scss in the wrong folder.

The relevant parts of paths.js:

code:

if (isInCreateReactAppSource) {
    // create-react-app development: we're in ./config/
    module.exports = {
        appBuild: resolveOwn(appBuild),
        appHtml: resolveOwn('../template/index.html'),
        appFavicon: resolveOwn('../template/favicon.ico'),
        appPackageJson: resolveOwn('../package.json'),
        appSrc: resolveOwn('../template/src'),
        appNodeModules: resolveOwn('../node_modules'),
        ownNodeModules: resolveOwn('../node_modules')
    };
} else if (!isEjected) {
    // before eject: we're in ./node_modules/react-scripts/config/
    module.exports = {
        appBuild: resolveApp(appBuild),
        appHtml: resolveApp('index.html'),
        appFavicon: resolveApp('favicon.ico'),
        appPackageJson: resolveApp('package.json'),
        appSrc: resolveApp('src'),
        appVendor: resolveApp('src/js/lib/vendor'),
        appNodeModules: resolveApp('node_modules'),
        // this is empty with npm3 but node resolution searches higher anyway:
        ownNodeModules: resolveOwn('../node_modules')
    };
} else {
    // after eject: we're in ./config/
    module.exports = {
        appBuild: resolveApp(appBuild),
        appHtml: resolveApp('index.html'),
        appFavicon: resolveApp('favicon.ico'),
        appPackageJson: resolveApp('package.json'),
        appSrc: resolveApp('src'),
        appVendor: resolveApp('src/js/lib/vendor'),
        appNodeModules: resolveApp('node_modules'),
        ownNodeModules: resolveApp('node_modules')
    };
}

# ? Oct 24, 2016 15:44

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Merkinman posted:

What alternate profession do you recommend because I never understand anything in this thread and I feel I never will.

I'm trying, desperately, to maybe try webpack. But even with Lumpy's examples, or this or this,I feel like everything is in Greek and I'd have better luck coding with my forehead hitting the keys. I somehow got a series of specific .js files to concatenate and minify (uglify) to one file. I'd like to get that to gzip as well but... my main issue right now is that I can't for the life of me figure out how to get a bunch of foundation .scss files to output a single, compiled, css file.

Lot of commented out stuff and whatever because I've been redoing this so many times at this point

A couple clarifying questions:

How are you importing / including the Foundation files in your code?

Have you started with a "stupid" version that only has one .js file and the foundation stuff and does everything inline?

# ? Oct 24, 2016 15:45

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

A couple clarifying questions:

How are you importing / including the Foundation files in your code?

Have you started with a "stupid" version that only has one .js file and the foundation stuff and does everything inline?

currently the folder is (largely from Foundation 5 import and file names changed to protect the innocent):

code:

app
-scss
--myoverridefiles.scss
--moreoverridefiles.scss
--...
-bower_components
--bower_components
---foundation
----scss
-----foundation
------components
-------foundationfile.scss
-------anotherdefaultfoundationfile.scss
-------...

So normally I just browser to /app and run bundle exec compass watch, but that part I'd like to put into webpack

Yes that's a giant mess, so I'm totally find with restructuring if I get this to work.

I'm currently working on a "stupid" version, that's what I've posted so far.

code:

webpack.config.js
src
-jsfilesthatwork.js
-overridesthatgetignored.scss
--foundation
---components
-----foundationcomponentsthatgetignored.scss
-----...

# ? Oct 24, 2016 16:21

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Merkinman posted:

currently the folder is (largely from Foundation 5 import and file names changed to protect the innocent):
code:
app
-scss
--myoverridefiles.scss
--moreoverridefiles.scss
--...
-bower_components
--bower_components
---foundation
----scss
-----foundation
------components
-------foundationfile.scss
-------anotherdefaultfoundationfile.scss
-------...
So normally I just browser to /app and run bundle exec compass watch, but that part I'd like to put into webpack

Yes that's a giant mess, so I'm totally find with restructuring if I get this to work.

I'm currently working on a "stupid" version, that's what I've posted so far.
code:
webpack.config.js
src
-jsfilesthatwork.js
-overridesthatgetignored.scss
--foundation
---components
-----foundationcomponentsthatgetignored.scss
-----...

how are you importing your SCSS in your js?

# ? Oct 24, 2016 16:34

PlaneGuy: Mar 28, 2001; g e r m a n
e n g i n e e r i n g; Yam Slacker

Helicity posted:

I asked my new team how they felt about Gulp and all of them are frustrated with the direction it's gone (hasn't gone) since the original maintainer left the project.

Out of curiosity, could you elaborate? Like, I haven't changed my gulp workflow since the thing came out so unless there's like a behind the scene thing I haven't noticed...?

I mean this is annoying:

code:

gulp.task('dev:assets',[],function(){ return copyassetsto('dev'); });
gulp.task('dev:sass',[], function(){ return cssfromsass('dev');});
gulp.task('dev:code',[], function(){ return build('dev', {minify: false, sourceMaps:true}); });

gulp.task('dev', ['dev:assets','dev:code', 'dev:sass']);

gulp.task('dist:assets',[],function(){ return copyassetsto('dist', 'dist');});
gulp.task('dist:code',[], function(){ return build('dist'); });
gulp.task('dist:sass',[], function(){ return cssfromsass('dist');});

gulp.task('dist', ['dist:assets','dist:code', 'dist:sass'] );

but it's always been like that

# ? Oct 24, 2016 16:35

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

how are you importing your SCSS in your js?

I'm.. not? I want it to be a separate file with that extractext plugin.

Oh I see, you're saying I should have it that way in the 'stupid' version. Well I just tried can't get that to work either. ~~Oh and my code in the bundle doesn't run onload either (like it does when not bundled).~~ Am I just using webpack for the wrong purpose??

I've tried the documentation, but it's rear end, and the comments are the usual FOSS "hurr durr you have a problem with the docs? improve them yourself"

I can't find any documenation/tutorial on what I'm trying to do so I'm thinking I'm just not understanding the entire concept of Webpack and/or it's not suitable for the website I work on.

Basically I am a 3 year old and anything anyone says might as well be written in Aramaic. I think that's my level of understanding w/r/t any front end framework more advanced that HTML4.

The Merkinman fucked around with this message at 17:37 on Oct 24, 2016

# ? Oct 24, 2016 17:01

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Merkinman posted:

I'm.. not? I want it to be a separate file with that extractext plugin.

Oh I see, you're saying I should have it that way in the 'stupid' version. Well I just tried can't get that to work either. ~~Oh and my code in the bundle doesn't run onload either (like it does when not bundled).~~ Am I just using webpack for the wrong purpose??

I've tried the documentation, but it's rear end, and the comments are the usual FOSS "hurr durr you have a problem with the docs? improve them yourself"

I can't find any documenation/tutorial on what I'm trying to do so I'm thinking I'm just not understanding the entire concept of Webpack and/or it's not suitable for the website I work on.

Basically I am a 3 year old and anything anyone says might as well be written in Aramaic. I think that's my level of understanding w/r/t any front end framework more advanced that HTML4.

Unless your JS imports SASS, Webpack won't know it exists.

Here's a semi-oversimplified "How Webpack does a thing":

Let us say you have three JS files and two SASS files:

code:

fileA.js
fileB.js
fileC.js

styleA.scss
styleB.scss

Now let us say file A looks like this:

code:

// fileA.js
import Buttes from './fileB';
import './styleA.scss';

// ... some code that uses Buttes and at least one rule from styleA

and that file B looks like this:

code:

// fileB.js
export default "lol, buttes";

and that style A looks like this:

code:

// styleA.scss
$aColor: #123456;
body { color: $aColor; }

So, those are our files. Now let us say our Webpack config has this bit as the entry:

entry: './fileA.js'

When webpack runs, it will slurp in fileA.js. It will see the import of fileB and the use of 'Buttes' and so slurp in fileB.js. It will see the import of styleA and the use of at least one rule in it, so it will slurp in (and trasnform assuming you have the loader for it set up) styleA.scss.

Since neither fileA nor fileB reference fileC, Webpack never looks at it. Since no .js files nor styleA reference styleB, Webpack never looks at it.

So, unless one of the files in your entry or files they import import your Foundation scss files, Webpack does not know they exist, and that's why it's not happening.

# ? Oct 24, 2016 18:07

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

That's why I think I'm using Webpack wrong, as in, not for its intended purpose.

We have a bunch of scss files compiled into one, monolithic, app.css (command line compass)
We have a bunch of js files that are included on every page (command line uglifyjs)
We also have some pages with one-off js files or ones used on some pages but not others
We have something, not yet production ready, that uses Angular2 written in TypeScript (Gulp)
We have something, that IS production ready, that uses Knockout written in TypeScript (TypeScript command)

So I was looking for something to use, to do all those things at once, in a standard way rather than every developer re-inventing the wheel.

From your example, it looks like Webpack is only used for a very component-based website, where every bit of functionality has its own .js and scss? As I'm working on one site, all the time, I complete site-wide rewrite all at once would be out of the question (have to do feature, feature, feature!!).

# ? Oct 24, 2016 18:58

HaB: Jan 5, 2001; What are the odds?

The Merkinman posted:

That's why I think I'm using Webpack wrong, as in, not for its intended purpose.

We have a bunch of scss files compiled into one, monolithic, app.css (command line compass)
We have a bunch of js files that are included on every page (command line uglifyjs)
We also have some pages with one-off js files or ones used on some pages but not others
We have something, not yet production ready, that uses Angular2 written in TypeScript (Gulp)
We have something, that IS production ready, that uses Knockout written in TypeScript (TypeScript command)

So I was looking for something to use, to do all those things at once, in a standard way rather than every developer re-inventing the wheel.

From your example, it looks like Webpack is only used for a very component-based website, where every bit of functionality has its own .js and scss? As I'm working on one site, all the time, I complete site-wide rewrite all at once would be out of the question (have to do feature, feature, feature!!).

You can still do what you're talking about with webpack, but it might be more trouble than it's worth.

You can chain Gulp/Grunt tasks together into a single "build" or "dev" command. Seems like that might be the easiest way to modify your existing setup

# ? Oct 24, 2016 19:39

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

HaB posted:

You can still do what you're talking about with webpack, but it might be more trouble than it's worth.

You can chain Gulp/Grunt tasks together into a single "build" or "dev" command. Seems like that might be the easiest way to modify your existing setup

When I asked way back, Lumpy suggested Webpack in the first place < :mad:

# ? Oct 25, 2016 21:17

Plavski: Feb 1, 2006; I could be a revolutionary

The Merkinman posted:

When I asked way back, Lumpy suggested Webpack in the first place <>

Welcome to web development! :confuoot:

# ? Oct 25, 2016 21:19

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Merkinman posted:

When I asked way back, Lumpy suggested Webpack in the first place <>

To be fair, I suggested a bunch of npm scripts as well, which seems to suit your needs much better. :v:

# ? Oct 25, 2016 21:24

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish.

# ? Oct 25, 2016 21:33

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

OK. I have a problem.

I write a bunch of cool web toys. I want to try out using TypeScript on one of them, because I keep making dumb type errors. My preferred workflow: in Visual Studio Code or Atom, have TypeScript. If I press F5 on the right in my browser, I should get JavaScript that is up to date.

I do not care if I use Gulp, Grunt, Broccoli, or Webpack. You pick the tech stack and tell me how to set it up. I just want TypeScript automatically compiled when I change something. Maybe some nice debug integration.

Go.

# ? Oct 26, 2016 05:21

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

The Merkinman posted:

Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish.

I prefer Gulp, it can be as simple or complex as you want it, and flows nicely from a JavaScript point of view.

Suspicious Dish posted:

OK. I have a problem.

I write a bunch of cool web toys. I want to try out using TypeScript on one of them, because I keep making dumb type errors. My preferred workflow: in Visual Studio Code or Atom, have TypeScript. If I press F5 on the right in my browser, I should get JavaScript that is up to date.

I do not care if I use Gulp, Grunt, Broccoli, or Webpack. You pick the tech stack and tell me how to set it up. I just want TypeScript automatically compiled when I change something. Maybe some nice debug integration.

Go.

Gulp again? You can set up a watches to run your TypeScript compile task quite effortlessly, it will run on any file change.

Note: this is using gulp-typescript 2.13.6 (TypeScript 1.8), not gulp-typescript 3.0.0, which uses TypeScript 2.0, as I've not had a chance to port stuff over.

code:


var ts = require("gulp-typescript");
var gulp = require("gulp");

gulp.task("ts", () => {
    var tsOptions = {
        "target": "es5",
        "module": "commonjs",
        "removeComments" : true
    };
    return gulp.src("/src")
        .pipe(ts(tsOptions))
        .pipe(gulp.dest("/dest"));
});

gulp.task("watch", () => {
    gulp.watch(src + "/js/**/*.ts", ["ts"]);
});

You can do this with any editor, though I would suggest VS Code. Just run "gulp watch" in a separate command window, and you'll see it fire off your ts task every time you change a .ts file.

Skandranon fucked around with this message at 05:37 on Oct 26, 2016

# ? Oct 26, 2016 05:27

abraham linksys: Sep 6, 2010

Suspicious Dish posted:

OK. I have a problem.

I write a bunch of cool web toys. I want to try out using TypeScript on one of them, because I keep making dumb type errors. My preferred workflow: in Visual Studio Code or Atom, have TypeScript. If I press F5 on the right in my browser, I should get JavaScript that is up to date.

I do not care if I use Gulp, Grunt, Broccoli, or Webpack. You pick the tech stack and tell me how to set it up. I just want TypeScript automatically compiled when I change something. Maybe some nice debug integration.

Go.

for applications, webpack's relatively easy! I use it (via ts-loader) for Manygolf and a couple other TypeScript apps. for libraries the question gets trickier, because you don't really want to output a bundle, you want to output a bunch of commonjs files something else can bundle, and webpack isn't built for that. i've recently used gulp for that task, but i don't love it, and have considered a broccoli-based build (though gulp is far easier to work with, so if you just want to get up and running ASAP, it's the way to go)

on the editor front, i'd recommend using vs code purely because atom-typescript, last i checked, was buggy and its lead maintainer had lost interest in the project

Skandranon posted:

I prefer Gulp, it can be as simple or complex as you want it, and flows nicely from a JavaScript point of view.

yeah, gulp would be pretty good for that use case. you could use gulp as a wrapper around webpack for one or more of those tasks (especially the Angular 2.0 application and probably the Knockout application?).

webpack's really good if you have "an application" you want to build, as i mentioned above. so, like, you'd have a webpack config that builds your angular app, and one that builds your knockout app, and you could have those as npm scripts or gulp tasks.

you could also use it to build that common bundle included on a lot of pages, plus smaller split bundles for your other pages - that's not hard at all to do with webpack (assuming you're using a module system!); you're just defining multiple entry points

for your scss -> app.css, webpack could handle that, but it would make the most sense in the context of a single app. if those 4 different apps you have are all using the same CSS, and you only want to build it a single time, i'd recommend that be a separate gulp task

abraham linksys fucked around with this message at 05:39 on Oct 26, 2016

# ? Oct 26, 2016 05:33

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Thanks guys! I eventually figured out how to use VS Code's builtin tasks to do it for me. Now I have a simple thing ported to TypeScript, and, wow, I am loving loving this language.

https://magcius.github.io/NITRO_BMD/
https://github.com/magcius/NITRO_BMD

# ? Oct 26, 2016 07:13

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Merkinman posted:

Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish.

Sorry you didn't describe your environment well enough for us to give you the prefect suggestion and taking a "this is what webpack does" post a s a "you need to use it" I guess?

# ? Oct 26, 2016 14:07

Flat Daddy: Dec 3, 2014; by Nyc_Tattoo

Suspicious Dish posted:

Thanks guys! I eventually figured out how to use VS Code's builtin tasks to do it for me. Now I have a simple thing ported to TypeScript, and, wow, I am loving loving this language.

https://magcius.github.io/NITRO_BMD/
https://github.com/magcius/NITRO_BMD

this is pretty much what i do for typescript. but i initialize the project with create-react-app. so vscode has a watcher that handles tsx->js (multiple output files) and create-react-app takes over from there. so theres 0 build config other than my .vscode directory, and if i ever need to actually customize my build i can 'npm run eject' and actually see the webpack config

# ? Oct 26, 2016 14:53

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

The Merkinman posted:

Cool thread, thanks for being the epitome of modern front-end development and suggesting I try to learn something that is ultimately useless for what I want to accomplish.

The issue is that your problem description wasn't clear enough to recognize what you needed.

That's not completely your fault. All of this stuff is so complicated with fuzzy edges between problem domains that it's difficult to know what info is pertinent to provide when asking a question.

# ? Oct 26, 2016 15:03

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Can you guys help me figure out how to mocha-test this AngularJS component's controller? Everything is in ES6, here's how we're creating components:

code:

import QuickAccessTpl from './quickAccess.html';
import './quickAccess.scss';

class QuickAccessController {
  // Logic and poo poo goes here, and I want to test it all
}

const QuickAccessComponent = {
  templateUrl: QuickAccessTpl,
  controller: QuickAccessController,
  bindings: {
    orangeKey: '@',
  },
};

export default QuickAccessComponent;

The issue arises when I try to import the component to get to its controller (this is in a .spec.js file):

code:

import QuickAccessComponent from '/foo/quickAccess.component';

Mocha freaks out because of the HTML import at the top of the component:

code:

SyntaxError: /folder/path/appName/src/app/foo/quickAccess/quickAccess.html: Unexpected token (1:5)
> 1 | <div class="quick-access">
    |      ^
  2 |   <foo-component></foo-component>
  3 |   <div class="quick-access__content">
  4 |     <div class="quick-access__section grid__container">

I've tried exporting the controller itself from the component with:

code:

export class QuickAccessController {

And then update the import in the mocha test:

code:

import { QuickAccessController } from '/foo/quickAccess.component';

But the same error appears, I'm guessing because the whole file is read in when imported.

Is there a clean way to test this controller given our current setup?

# ? Oct 27, 2016 17:47

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

IAmKale posted:

Can you guys help me figure out how to mocha-test this AngularJS component's controller? Everything is in ES6, here's how we're creating components:

Is there a clean way to test this controller given our current setup?

Why not have the Controller as a completely separate file, without any imports? Then you have a file which just imports the html, css, and does the component definition. This should let you then run tests against the controller object without even knowing it is an Angular Component.

# ? Oct 27, 2016 18:23

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Skandranon posted:

Why not have the Controller as a completely separate file, without any imports? Then you have a file which just imports the html, css, and does the component definition. This should let you then run tests against the controller object without even knowing it is an Angular Component.

Thanks for that idea, I was considering it earlier. I'll give it a try and see how it plays out; it'll involve a bit of refactor across the codebase but I'd rather refactor now when we only have a handful of controllers to consider.

IAmKale fucked around with this message at 20:19 on Oct 27, 2016

# ? Oct 27, 2016 20:06

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

So I'm back to waste more time and feel like an idiot.

I found some tutorial on Webpack (because at this point, why not?) But early on they want you to install webpack-dev-server. It won't install for me and many others due to peer dependencies. It seems the 'fix' is in version 1.15, but AFAIK, the latest stable version of Webpack is still 1.13, so what am I supposed to do? (installing webpack-dev-server locally didn't work either)

# ? Nov 3, 2016 17:16

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

The Merkinman posted:

So I'm back to waste more time and feel like an idiot.

I found some tutorial on Webpack (because at this point, why not?) But early on they want you to install webpack-dev-server. It won't install for me and many others due to peer dependencies. It seems the 'fix' is in version 1.15, but AFAIK, the latest stable version of Webpack is still 1.13, so what am I supposed to do? (installing webpack-dev-server locally didn't work either)

I just used the Python web server because :effort:

... and live reloading drives me loving crazy anyway

python -m SimpleHTTPServer in the output directory. Easy peasy

# ? Nov 3, 2016 17:50

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order).

I wouldn't waste too much time on it, after you figure it out once you'll move on to using a boilerplate that you or someone else wrote that fits your needs and Just Works.

Anony Mouse fucked around with this message at 00:34 on Nov 4, 2016

# ? Nov 4, 2016 00:27

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

Anony Mouse posted:

Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order).

I wouldn't waste too much time on it, after you figure it out once you'll move on to using a boilerplate that you or someone else wrote that fits your needs and Just Works.

I had a problem with it using someone's boilerplate. IIRC it installed without any errors but then didn't work, but I'm on Windows so I halfway expect that out of the Node toolchain at all times.

# ? Nov 4, 2016 13:48

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Anony Mouse posted:

Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order).

I wouldn't waste too much time on it, after you figure it out once you'll move on to using a boilerplate that you or someone else wrote that fits your needs and Just Works.

Are you asking me? Well this is my package.json which is from the tutorial, only slightly changed with the start script and inclusion of strip-loader

code:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack"
  },
  "keywords": [],
  "author": "Joe Eames",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "jshint": "^2.8.0",
    "jshint-loader": "^0.8.3",
    "node-libs-browser": "^0.5.3",
    "strip-loader": "^0.1.2",
    "webpack": "^1.12.9"
  }
}

# ? Nov 4, 2016 14:00

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 17:22

Redmark: Dec 11, 2012; This one's for you, Morph.
-Evo 2013

For the triple whammy I've been trying the whole Babel/Webpack/whatever behemoth for the first time, developing on emacs, on the Windows Linux Subsystem bash terminal. :shepface:

It has been... an interesting experience, but somehow after pasting in hacks and workarounds from a thousand different open Github issues it seems to mostly work. I might just stick with it and hope Microsoft eventually implements all the missing syscalls and such, since I hate working on VNs. The dream and/or nightmare of Windows for everything might be coming true.

The hardest part has actually been using the native terminal, which is absolute garbage. The second hardest part is the Webpack documentation, which is merely trash.

# ? Nov 4, 2016 15:57

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »