Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API

From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Search - "browserify"
-
Hi, I am a Javascript apprentice. Can you help me with my project?
- Sure! What do you need?
Oh, it’s very simple, I just want to make a static webpage that shows a clock with the real time.
- Wait, why static? Why not dynamic?
I don’t know, I guess it’ll be easier.
- Well, maybe, but that’s boring, and if that’s boring you are not going to put in time, and if you’re not going to put in time, it’s going to be harder; so it’s better to start with something harder in order to make it easier.
You know that doesn’t make sense right?
- When you learn Javascript you’ll get it.
Okay, so I want to parse this date first to make the clock be universal for all the regions.
- You’re not going to do that by yourself right? You know what they say, don’t repeat yourself!
But it’s just two lines.
- Don’t reinvent the wheel!
Literally, Javascript has a built in library for t...
- One component per file!
I’m lost.
- It happens, and you’ll get lost managing your files as well. You should use Webpack or Browserify for managing your modules.
Doesn’t Javascript include that already?
- Yes, but some people still have previous versions of ECMAScript, so it wouldn’t be compatible.
What’s ECMAScript?
- Javascript
Why is it called ECMAScript then?
- It’s called both ways. Anyways, after you install Webpack to manage your modules, you still need a module and dependency manager, such as bower, or node package manager or yarn.
What does that have to do with my page?
- So you can install AngularJS.
What’s AngularJS?
- A Javascript framework that allows you to do complex stuff easily, such as two way data binding!
Oh, that’s great, so if I modify one sentence on a part of the page, it will automatically refresh the other part of the page which is related to the first one and viceversa?
- Exactly! Except two way data binding is not recommended, since you don’t want child components to edit the parent components of your app.
Then why make two way data binding in the first place?
- It’s backed up by Google. You just don’t get it do you?
I have installed AngularJS now, but it seems I have to redefine something called a... directive?
- AngularJS is old now, you should start using Angular, aka Angular 2.
But it’s the same name... wtf! Only 3 minutes have passed since we started talking, how are they in Angular 2 already?
- You mean 3.
2.
- 3.
4?
- 5.
6?
- Exactly.
Okay, I now know Angular 6.0, and use a component based architecture using only a one way data binding, I have read and started using the Design Patterns already described to solve my problem without reinventing the wheel using libraries such as lodash and D3 for a world map visualization of my clock as well as moment to parse the dates correctly. I also used ECMAScript 6 with Babel to secure backwards compatibility.
- That’s good.
Really?
- Yes, except you didn’t concatenate your html into templates that can be under a super Javascript file which can, then, be concatenated along all your Javascript files and finally be minimized in order to reduce latency. And automate all that process using Gulp while testing every single unit of your code using Jasmine or protractor or just the Angular built in unit tester.
I did.
- But did you use TypeScript?36 -
Grunt, gulp, bower, webpack, rollup, yarn, npm, requirejs, commonjs, browserify, brunch, rollup, parcel, fusebox, babel,
wrappers for bundlers, frameworks on frameworks, then for css, theres scss, sass, less, stylus, compass, and for templates, handlebars, mustache, nunjucks, underscore, ejs, pug, jade, and about five billion other word-salad tools, all with their own CLIs, each in some way building on npm, but with their own non-congruent little syntax, like no one realized they were reinventing the same problems introduced by domain specific languages, most happy to announce "configuration takes a little time, but it's worth it!"
No, it's not. Just stop people. Just stop. You're not doing anyone any favors by creating another lib, all you're doing is tooting your own horn and self promoting. Use what exists and stop creating more shit for new people to learn, to add to the giant clusterfuck that is the 2019 hotmess known as "web development."
You're not special. You're not important. You're lib or tool will be famous for 15 minutes and no one cares what you've made.
If you want to contribute to web development, do us all a favor and contribute to global sanity by kindly deleting your contribution and any plans to contribute new solutions to problems that have already been solved.18 -
When gulp build (expressjs + browsersync + browserify + uglify + gzip + gulp-zip + gulp-tar) perfectly compiles your code, minify and concat all js, gzipped them, minify images, package the files into a .zip and .tar... and refresh your browser 😍
you begin to have faith that its gona be a nice day ahead -
FUCK ME!#@$%@ 6 hours now, trying to make a production build of my react/redux app but FUCKING envify sets NODE_ENV after the imported libraries are transformed!! IT WORKED TWO DAYS AGO WHAT HAPPENED :((2
-
Webpack, requirejs, AMD, browserify all are wonderful tools but they don't play nice with node(client side) .
I LITERALLY switched between all, because the hacks worked but not quite. (Using node and electron, go figure!)
You know what they say fifth times the charm.1 -
I really love this boilerplate for starting an Angular, gulp, browserify web app. https://github.com/jakemmarsh/...
-
Anybody know how I could make an RxJS observable without RxJS?
I'm working on a library and I need it to be small (So including RxJS isn't really viable), run in the browser (IDK if Browserify will work for RxJS), and be fast. I need a way for a given element to 'listen' (or in RxJS terms, 'subscribe') to a value and update its text content whenever the value changes.
My current implementation is just a interval loop that checks if the previous value is the same as the current one, and if it isn't, it modifies the DOM.6