4 ms·

Using Neutrino to jump-start modern JavaScript development

104 points by nachtigall 10y ago

talkingtab 10y ago
Is there a simple example of how to add something like react-router, redux and bootstrap as to presets to neutrino. My problem with CRA is that while very helpful(!) I am often faced with having to add those kinds of components.
- Touche 10y ago
  I'm not part of the React ecosystem so please excuse my ignorance, but why would adding a library require changing a build? Wouldn't you just npm/yarn install those things and use them?
  - thangngoc89 10y ago
    Yes you are right. Redux or react router have nothing to do with build config. They are parts of the app
tobltobs 10y ago
Javascript Boilerplate Fatigue
- underwater 10y ago
  This appears to be the opposite of boilerplate. It's a tool that replaces verbose, brittle, code with a single dependency.
  - tobltobs 10y ago
    Boilerplate framework?
    - zzalpha 10y ago
      Personally, I'm looking forward to five more of these projects springing up, after which someone can great a meta boilerplate framework for abstracting all the boilerplate frameworks. It can have its own meta preset format that translates into the six other preset formats so you, the lucky developer, can pick your open boilerplate generator and rely on this boilerplate generator generator to hide everything behind a common, leaky interface! We'll call it Hadron, since Hadron decay can result in the production of Neutrinos...
      - billforsternz 10y ago
        Well played. It's the abstract factory, factory ... factory paradigm all over again.
- philmander 10y ago
  After just reading the title, I assumed the same thing, but actually this is exactly what web development needs. create-react-app is a great example of a project that abstracts away all the complexities of a JavaScript build process and dev environment, but customization inevitably requires you to 'eject' and reintroduce that complexity to your project. This tool goes one step further and supports customization without this eject step. This is finally where web builds need to be to provide a simple foundation for modern web development so devs can focus more on making apps and less on tooling. I look forward to trying it out.
  - omouse 10y ago
    What complexities of build processes?! Building Javascript files with modules and deps is a solved problem. We've built all sorts of other file types and compiled them and linked them before with tools like Make, SCons and other tools. It's ridiculous to think that JavaScript is a unique language that needs its own build tools. It does not. We went down the wrong path years ago when we decided that whenever we use a language we also need to use tools written in that language. Grunt, gulp, webpack and the rest should go away.
    - philmander 10y ago
      I hear you. Node.js made my Ant tasks for running jshint and qunit totally redundant :(
- deleted 10y ago
  [deleted]
caseymarquis 10y ago
Maybe it's just me, but I didn't find it all that difficult to get started with webpack after a few tutorials and samples. This seems like it hides away something that people should probably understand, which isn't all that difficult to get started with. Also when you start combining different packages in webpack (or encounter an error (or want to make some decisions in the config script)), the standard copy/paste boiler plate becomes less and less useful. This looks neat, I just don't think it's likely to do away with configuration completely unless you've got a very standard setup. That aside, it sort of sounds like the goal here is "a sort of package manager which also handles boilerplate"? Definitely sounds useful when you want to quickly try something new.
- Pigo 10y ago
  This was my biggest complaint with the Angular 2 cli generated app. I had to dig to even find out they were using webpack behind the scenes. And I know they just want to utilize it without troubling newbies, but I wish they had some means of customizing it. I think it's on their roadmap, or just being requested a lot on github. There's so much you can do with webpack that it's a shame it's hidden.
  - kageneko 10y ago
    The inability to customize webpack was sometimes a pain point for me. There were a few things I wanted to do that would have been much easier if I could just play around with it. Fortunately, they've added the ability to get yourself a webpack config! https://github.com/angular/angular-cli/commit/7ac0d05 https://github.com/angular/angular-cli/commit/7ac0d05 http://www.dzurico.com/angular-cli-with-the-super-powers/ http://www.dzurico.com/angular-cli-with-the-super-powers/
    - Pigo 10y ago
      Nice! I was hoping someone would respond to me to tell me how they finally had a way to do this.
- tjholowaychuk 10y ago
xmattx 10y ago
Reminds me of a framework-agnostic vue-cli. Though that simply builds a configuration/tooling-setup which you can then tweak to your liking. Not sure what I think of using a neutrino-specific config in the package.json for overrides, feels bloated compared to just editing the webpack config directly, and doesn't make it any easier. But to each his own, I guess. That name though, I guess particles are en vogue :)
deleted 10y ago
[deleted]
ryanbrunner 10y ago
I think this is a cool tool, but it's somewhere between funny and depressing that the article brags about how they were able to get a 'Hello, world!' program up in less than 5 minutes.
- mikewhy 10y ago
  A Hello World GUI app, which is a fairly important distinction. Also one that runs on any machine with a web browser.
  - sdegutis 10y ago
    But creating and running a Hello World GUI app for iOS only takes a few seconds, even when running it on your live device.
    - RubenSandwich 10y ago
      Not really an apt comparison as iOS is a complete ecosystem controlled by one party, so choices are made for you. I'd say comparing it to a Hello World GUI app in C++ would be, as C++ also has a proliferation of build tools and graphics libraries that you have to choice before you can make a Hello World GUI app.
      - sdegutis 10y ago
        Good point. Although I guess my broader point is that the decentralized nature of web development is actually kind of a huge disadvantage in pretty much every way except "flexibility", and that the cons very much outweigh the pros.
    - christophilus 10y ago
      He said "less than 5 minutes". It took me roughly 1.5 minutes, and most of that was just downloading build stuff. How long does it take you to download XCode and tools and get a "Hello World" iOS app running? It'd take me much longer than 1.5 minutes.
    - 10y ago
moron4hire 10y ago
I've been doing something like this for a while. I have my entire build process as a project on NPM itself. I just have to import it into my projects and write a small gulp project setup. It's very declarative and if I spent a little more effort could probably mostly eliminate. It has most of my preferred tools in it, including dev server setup, statically generated Pug templates, Babel, Rollup with tree shaking, and documentation generation. I've found it's also great for keeping my project setup clean. Most of my project dependencies end up being dev dependencies for build process, and there are a lot of them. This simplifies down to one.
- anaganisk 10y ago
  is it open? Would be interesting to use it.
  - moron4hire 10y ago
    It is, but I haven't documented it at all https://github.com/capnmidnight/notiontheory-basic-build https://github.com/capnmidnight/notiontheory-basic-build Here is an example of usage https://github.com/NotionTheory/Primrose/blob/master/gulpfile.js https://github.com/NotionTheory/Primrose/blob/master/gulpfil... The name is lame, I hadn't considered sharing it and I misremembered that the dev server and doc gen are not yet a default part of the build project (though I could add them easily).
andrewvijay 10y ago
But how is it different from create-react-app tool that is supported by the react guys themselves? Sure it has setup for nodejs too. But I don't see people using this to quick start nodejs apps.
mhd 10y ago
What do I have to change with the "hello world" setup to get any kind of error reporting? If I introduce syntax errors in the index.js, I don't even get a good stacktrace on the CLI, never mind a neat compiler message in the browser itself (like create-react-app does). Is this out of the scope for the basic example or an oversight? Anyway, if this is targeted at beginners, that's a bit of an issue.
foundry27 10y ago
Am I the only one who thought that the post title was referring to QNX Neutrino and did a double-take when it went on to talk about Javascript?
iomind 10y ago
Why not just use Yeoman? Moz really like reinventing the wheel.
- moron4hire 10y ago
  There are few things I hate more than this asinine "don't reinvent the wheel" reply to people's project postings. Also, Moz is a completely different, unrelated company.
- tjholowaychuk 10y ago
  Yeoman is boilerplate, this is code which directly avoids boilerplate, since it's an abstraction instead. Yeoman IMO encourages the wrong things, most true boilerplate (files) can just be a sample repo that you clone.
gens 10y ago
Does anybody just write plain JS ?
- deleted 10y ago
  [deleted]
- warent 10y ago
  I did recently for a very simple Cordova app used by sales reps for marketing purposes. A framework or external libraries was overkill to the extreme, so by sticking with just vanilla I kept the app size to a minimum.
- Buetol 10y ago
  I write plain js for simple pages and load webpack-compiled js for complex pages, you can do both.
- DCoder 10y ago
  Yes. I just wrote a Chrome extension this week, using plain ES6. There was not enough code in it to require TypeScript or Webpack.
- madhadron 10y ago
  Yes, actually. As soon as you recognize that the DOM API is rich and fast and you understand how MVC works, you actually get much cleaner code by not mixing HTML and JavaScript. My original explorations of doing this are at https://github.com/madhadron/mvc_for_the_web https://github.com/madhadron/mvc_for_the_web. When you understand this, React's shadow DOM and JSX are completely unnecessary. Combine it with the fact that grid layout is expected to be in the stable releases of Chrome and Firefox in the next month, and, if you have no legacy browser requirements as I happen not to, web application development becomes somewhat reasonable for the first time since I began doing it in the '90's. Admittedly, when I started trying to build a library out of this (https://github.com/madhadron/allorryll https://github.com/madhadron/allorryll), I put it in TypeScript, but I'm also the guy who did serial port and Firewire camera control in Haskell. Obviously this doesn't apply to writing documents on the web, where JavaScript should only be added as part of a structure that will gracefully degrade.
tjholowaychuk 10y ago
Works great, I like this approach much better than the variants that I've seen, this is exactly what I was hoping to see. It's simple, concise, imposes nothing on you, ships with good presets (from what I've seen so far), still extensible. Nice work!
sthatipamala 10y ago
How composable are these presets? I like to use Typescript and ideally that is only additional one preset rather than a combinatorial explosion of things like "neutrino-react-electron-typescript".
ziikutv 10y ago
Great! More tooling
amk_ 10y ago
One thing that seems to be missing from these SPA app utilities is an automatic way of pointing your root HTML file at an expirable root JS file. In development it's ok to point at `application.js` but in production NGINX/S3/Apache/Cloudfront should be serving something like md5-digest-of-app-bundle.js such that when the bundle content changes you invalidate the cache. If you're using a CDN you'll also need to have a prefix step to change the root url for assets.
- chatmasta 10y ago
  Use an env var
  - amk_ 10y ago
    Yes, you can put the CDN host in an env var, but the link rewriting and asset digesting still needs to be done by the bundler.
    - chatmasta 10y ago
      Why can't you put it in an env var before calling the bundler?
      - amk_ 10y ago
        Maybe I'm not explaining myself clearly. You can use an environment variable to point to a CDN host and use it as a prefix in your code. But you also need to make sure the CDN assets get expired. One approach is to use the stats plugin for Webpack, parse the manifest, and write a helper so that the right files get included in the HTML. Here is an example of how the webpack-rails gem does it: https://github.com/mipearson/webpack-rails/blob/master/lib/webpack/rails/manifest.rb https://github.com/mipearson/webpack-rails/blob/master/lib/w... And here is an explanation of why you would want to do that instead of using ETag headers on constant filenames: http://stackoverflow.com/questions/26272271/why-digest-are-used-in-rails-4-for-static-content-instead-of-etag http://stackoverflow.com/questions/26272271/why-digest-are-u... EDIT: In fact after looking into it, Neutrino does use html-webpack-plugin which does exactly that by templating index.html: https://www.npmjs.com/package/html-webpack-template https://www.npmjs.com/package/html-webpack-template Which is cool!

104 points by nachtigall 10y ago

Is there a simple example of how to add something like react-router, redux and bootstrap as to presets to neutrino. My problem with CRA is that while very helpful(!) I am often faced with having to add those kinds of components.

Touche 10y ago
I'm not part of the React ecosystem so please excuse my ignorance, but why would adding a library require changing a build? Wouldn't you just npm/yarn install those things and use them?
- thangngoc89 10y ago
  Yes you are right. Redux or react router have nothing to do with build config. They are parts of the app

tobltobs 10y ago

Javascript Boilerplate Fatigue

underwater 10y ago
This appears to be the opposite of boilerplate. It's a tool that replaces verbose, brittle, code with a single dependency.
- tobltobs 10y ago
  Boilerplate framework?
  - zzalpha 10y ago
    Personally, I'm looking forward to five more of these projects springing up, after which someone can great a meta boilerplate framework for abstracting all the boilerplate frameworks. It can have its own meta preset format that translates into the six other preset formats so you, the lucky developer, can pick your open boilerplate generator and rely on this boilerplate generator generator to hide everything behind a common, leaky interface! We'll call it Hadron, since Hadron decay can result in the production of Neutrinos...
    - billforsternz 10y ago
      Well played. It's the abstract factory, factory ... factory paradigm all over again.
philmander 10y ago
After just reading the title, I assumed the same thing, but actually this is exactly what web development needs. create-react-app is a great example of a project that abstracts away all the complexities of a JavaScript build process and dev environment, but customization inevitably requires you to 'eject' and reintroduce that complexity to your project. This tool goes one step further and supports customization without this eject step. This is finally where web builds need to be to provide a simple foundation for modern web development so devs can focus more on making apps and less on tooling. I look forward to trying it out.
- omouse 10y ago
  What complexities of build processes?! Building Javascript files with modules and deps is a solved problem. We've built all sorts of other file types and compiled them and linked them before with tools like Make, SCons and other tools. It's ridiculous to think that JavaScript is a unique language that needs its own build tools. It does not. We went down the wrong path years ago when we decided that whenever we use a language we also need to use tools written in that language. Grunt, gulp, webpack and the rest should go away.
  - philmander 10y ago
    I hear you. Node.js made my Ant tasks for running jshint and qunit totally redundant :(
deleted 10y ago
[deleted]

caseymarquis 10y ago

Maybe it's just me, but I didn't find it all that difficult to get started with webpack after a few tutorials and samples. This seems like it hides away something that people should probably understand, which isn't all that difficult to get started with. Also when you start combining different packages in webpack (or encounter an error (or want to make some decisions in the config script)), the standard copy/paste boiler plate becomes less and less useful. This looks neat, I just don't think it's likely to do away with configuration completely unless you've got a very standard setup. That aside, it sort of sounds like the goal here is "a sort of package manager which also handles boilerplate"? Definitely sounds useful when you want to quickly try something new.

Pigo 10y ago
This was my biggest complaint with the Angular 2 cli generated app. I had to dig to even find out they were using webpack behind the scenes. And I know they just want to utilize it without troubling newbies, but I wish they had some means of customizing it. I think it's on their roadmap, or just being requested a lot on github. There's so much you can do with webpack that it's a shame it's hidden.
- kageneko 10y ago
  The inability to customize webpack was sometimes a pain point for me. There were a few things I wanted to do that would have been much easier if I could just play around with it. Fortunately, they've added the ability to get yourself a webpack config! https://github.com/angular/angular-cli/commit/7ac0d05 https://github.com/angular/angular-cli/commit/7ac0d05 http://www.dzurico.com/angular-cli-with-the-super-powers/ http://www.dzurico.com/angular-cli-with-the-super-powers/
  - Pigo 10y ago
    Nice! I was hoping someone would respond to me to tell me how they finally had a way to do this.
tjholowaychuk 10y ago

xmattx 10y ago

Reminds me of a framework-agnostic vue-cli. Though that simply builds a configuration/tooling-setup which you can then tweak to your liking. Not sure what I think of using a neutrino-specific config in the package.json for overrides, feels bloated compared to just editing the webpack config directly, and doesn't make it any easier. But to each his own, I guess. That name though, I guess particles are en vogue :)

deleted 10y ago

[deleted]

ryanbrunner 10y ago

I think this is a cool tool, but it's somewhere between funny and depressing that the article brags about how they were able to get a 'Hello, world!' program up in less than 5 minutes.

mikewhy 10y ago
A Hello World GUI app, which is a fairly important distinction. Also one that runs on any machine with a web browser.
- sdegutis 10y ago
  But creating and running a Hello World GUI app for iOS only takes a few seconds, even when running it on your live device.
  - RubenSandwich 10y ago
    Not really an apt comparison as iOS is a complete ecosystem controlled by one party, so choices are made for you. I'd say comparing it to a Hello World GUI app in C++ would be, as C++ also has a proliferation of build tools and graphics libraries that you have to choice before you can make a Hello World GUI app.
    - sdegutis 10y ago
      Good point. Although I guess my broader point is that the decentralized nature of web development is actually kind of a huge disadvantage in pretty much every way except "flexibility", and that the cons very much outweigh the pros.
  - christophilus 10y ago
    He said "less than 5 minutes". It took me roughly 1.5 minutes, and most of that was just downloading build stuff. How long does it take you to download XCode and tools and get a "Hello World" iOS app running? It'd take me much longer than 1.5 minutes.
  - 10y ago

moron4hire 10y ago

I've been doing something like this for a while. I have my entire build process as a project on NPM itself. I just have to import it into my projects and write a small gulp project setup. It's very declarative and if I spent a little more effort could probably mostly eliminate. It has most of my preferred tools in it, including dev server setup, statically generated Pug templates, Babel, Rollup with tree shaking, and documentation generation. I've found it's also great for keeping my project setup clean. Most of my project dependencies end up being dev dependencies for build process, and there are a lot of them. This simplifies down to one.

anaganisk 10y ago
is it open? Would be interesting to use it.
- moron4hire 10y ago
  It is, but I haven't documented it at all https://github.com/capnmidnight/notiontheory-basic-build https://github.com/capnmidnight/notiontheory-basic-build Here is an example of usage https://github.com/NotionTheory/Primrose/blob/master/gulpfile.js https://github.com/NotionTheory/Primrose/blob/master/gulpfil... The name is lame, I hadn't considered sharing it and I misremembered that the dev server and doc gen are not yet a default part of the build project (though I could add them easily).

andrewvijay 10y ago

But how is it different from create-react-app tool that is supported by the react guys themselves? Sure it has setup for nodejs too. But I don't see people using this to quick start nodejs apps.

mhd 10y ago

What do I have to change with the "hello world" setup to get any kind of error reporting? If I introduce syntax errors in the index.js, I don't even get a good stacktrace on the CLI, never mind a neat compiler message in the browser itself (like create-react-app does). Is this out of the scope for the basic example or an oversight? Anyway, if this is targeted at beginners, that's a bit of an issue.

foundry27 10y ago

Am I the only one who thought that the post title was referring to QNX Neutrino and did a double-take when it went on to talk about Javascript?

iomind 10y ago

Why not just use Yeoman? Moz really like reinventing the wheel.

moron4hire 10y ago
There are few things I hate more than this asinine "don't reinvent the wheel" reply to people's project postings. Also, Moz is a completely different, unrelated company.
tjholowaychuk 10y ago
Yeoman is boilerplate, this is code which directly avoids boilerplate, since it's an abstraction instead. Yeoman IMO encourages the wrong things, most true boilerplate (files) can just be a sample repo that you clone.

gens 10y ago

Does anybody just write plain JS ?

deleted 10y ago
[deleted]
warent 10y ago
I did recently for a very simple Cordova app used by sales reps for marketing purposes. A framework or external libraries was overkill to the extreme, so by sticking with just vanilla I kept the app size to a minimum.
Buetol 10y ago
I write plain js for simple pages and load webpack-compiled js for complex pages, you can do both.
DCoder 10y ago
Yes. I just wrote a Chrome extension this week, using plain ES6. There was not enough code in it to require TypeScript or Webpack.
madhadron 10y ago
Yes, actually. As soon as you recognize that the DOM API is rich and fast and you understand how MVC works, you actually get much cleaner code by not mixing HTML and JavaScript. My original explorations of doing this are at https://github.com/madhadron/mvc_for_the_web https://github.com/madhadron/mvc_for_the_web. When you understand this, React's shadow DOM and JSX are completely unnecessary. Combine it with the fact that grid layout is expected to be in the stable releases of Chrome and Firefox in the next month, and, if you have no legacy browser requirements as I happen not to, web application development becomes somewhat reasonable for the first time since I began doing it in the '90's. Admittedly, when I started trying to build a library out of this (https://github.com/madhadron/allorryll https://github.com/madhadron/allorryll), I put it in TypeScript, but I'm also the guy who did serial port and Firewire camera control in Haskell. Obviously this doesn't apply to writing documents on the web, where JavaScript should only be added as part of a structure that will gracefully degrade.

tjholowaychuk 10y ago

Works great, I like this approach much better than the variants that I've seen, this is exactly what I was hoping to see. It's simple, concise, imposes nothing on you, ships with good presets (from what I've seen so far), still extensible. Nice work!

sthatipamala 10y ago

How composable are these presets? I like to use Typescript and ideally that is only additional one preset rather than a combinatorial explosion of things like "neutrino-react-electron-typescript".

ziikutv 10y ago

Great! More tooling

amk_ 10y ago

One thing that seems to be missing from these SPA app utilities is an automatic way of pointing your root HTML file at an expirable root JS file. In development it's ok to point at `application.js` but in production NGINX/S3/Apache/Cloudfront should be serving something like md5-digest-of-app-bundle.js such that when the bundle content changes you invalidate the cache. If you're using a CDN you'll also need to have a prefix step to change the root url for assets.

chatmasta 10y ago
Use an env var
- amk_ 10y ago
  Yes, you can put the CDN host in an env var, but the link rewriting and asset digesting still needs to be done by the bundler.
  - chatmasta 10y ago
    Why can't you put it in an env var before calling the bundler?
    - amk_ 10y ago
      Maybe I'm not explaining myself clearly. You can use an environment variable to point to a CDN host and use it as a prefix in your code. But you also need to make sure the CDN assets get expired. One approach is to use the stats plugin for Webpack, parse the manifest, and write a helper so that the right files get included in the HTML. Here is an example of how the webpack-rails gem does it: https://github.com/mipearson/webpack-rails/blob/master/lib/webpack/rails/manifest.rb https://github.com/mipearson/webpack-rails/blob/master/lib/w... And here is an explanation of why you would want to do that instead of using ETag headers on constant filenames: http://stackoverflow.com/questions/26272271/why-digest-are-used-in-rails-4-for-static-content-instead-of-etag http://stackoverflow.com/questions/26272271/why-digest-are-u... EDIT: In fact after looking into it, Neutrino does use html-webpack-plugin which does exactly that by templating index.html: https://www.npmjs.com/package/html-webpack-template https://www.npmjs.com/package/html-webpack-template Which is cool!