9 ms·

I think the weirdest way is using React. I mean, it feels so unnatural for me, compared to the jQuery way. You have to download thousands of packages, keep tra

I think the weirdest way is using React. I mean, it feels so unnatural for me, compared to the jQuery way. You have to download thousands of packages, keep track of various dependencies and their security holes, adding an overhead for auditing them. HTML5 with jQuery IMHO still beats everything in simplicity and getting work done fastly

louismerlin 7y ago
I've been using Preact and the Parcel Bundler for my small projects, I'm able to build awesome stuff like I would with React, but with a few kbs of dependencies and no configuration file !
- FlorianRappl 7y ago
  This is the way. Unfortunately, many people don't know about Parcel and assume that adding 20 Webpack plugins (plus their configuration) is a proper way.
- flanbiscuit 7y ago
  +1 for Preact! Shout out to Svelte as well. If you can, don't use it to render entire pages. Use it for only the dynamic parts.
chrisweekly 7y ago
Maintaining state by writing directly to the DOM is pretty fundamentally "weird" too, if you think about it.
madprops 7y ago
Having dependencies might not be a huge problem. But I've made some pretty complex interfaces using nothing but jquery, handlebars, and other util libraries. All patterns thought-out and written by myself. Not once did I feel I needed something more complex. I get the impression all the hype followers of front end frameworks might not have the best idea of what they're doing. Especially when you see people commenting about frameworks like angular/react/vue making jquery obsolete, because one is just a syntax enhancement library for dom manipulation, the others are predefined workflow patterns. I guess if you have to work on teams, or more corporate-y stuff, frameworks make sense, because programmers can be easily added or replaced. But luckily I've had the freedom to work on my own projects by myself, so I get the freedom to define whatever structure I see fit. Fun story: Somebody lectured me on how I should adapt my application to use one of those frameworks because it would reduce the code size according to him. Months later he complained about how he did just that with his application only to realize it made it more needlessly complicated and bloated.
- tekkk 7y ago
  It's exactly because I don't have to think about everything by myself, I'm completely happy using somebody else's well-maintained library and adding it in. It saves time, mine and everyone else's, and frees it up to do other things. "I guess if you have to work on team" - wait you never work with other people? I think that's kinda the basic requirement for many software projects that they scale outside one person coding in a basement or cafeteria. It's just that if nobody except you can understand the patterns you've created the code is not very maintainable in the long run. Sure it's probably fast and slick, but when you're gone can the next guy read your code? And more importantly, build on top of it?
FlorianRappl 7y ago
I just saw three dependencies (arguably even less): https://www.npmjs.com/package/react https://www.npmjs.com/package/react Don't know how you reach your conclusion.
- throwaway_bad 7y ago
  If you generate a typical react app with create-react-app, you get ~1000 dependencies in node_modules: `npx create-react-app some-app-name --typescript` (it was actually exactly 1000 dependencies which is freaking me out because the number was so round. wondering if it am counting lines wrong `ls | wc -l`)
  - codecurve 7y ago
    And 997 of those are development tooling dependencies that are not included in the application that you eventually deploy. Don't get me wrong, I would rather there were fewer development dependencies too, but they are tooling abstractions that you are _opting-in_ to. If that is still a cognitive burden, then there's nothing to stop you using React a build step through a CDN.
    - mister_hn 7y ago
      And you just need 1 to fail to break the whole chain (think to backdoored / taken over npm packages)
  - tqkxzugoaupvwqr 7y ago
    Your ls command may create columns. To list one item per line and count the lines: `ls -1 | wc -l`
    - helb 7y ago
      ls usually switches to one column automatically when it's output is piped: https://i.vgy.me/cNfMzV.png https://i.vgy.me/cNfMzV.png
  - 7y ago
benbristow 7y ago
Try build a complex website with complex journeys and a component architecture and you'll be begging for React. It's probably because you haven't seen the light. I'd never ever go back to using jQuery unless it was for a basic marketing site - even then I'd probably think of using Vue if anything got more complex than a carousel on the page.
- collyw 7y ago
  Keep the majority of the rendering server side and it isn't a problem at all. Jquery for some UI enhancement.
  - benbristow 7y ago
    Then you end up having the page refresh loads of times and having a less smooth experience.
    - kickopotomus 7y ago
      There are ways around that. E.g. turbolinks[0]. [0]: https://github.com/turbolinks/turbolinks https://github.com/turbolinks/turbolinks
    - collyw 7y ago
      All the SPA apps I have worked on have been significantly slower than the server side rendered apps I have written myself. Page refresh loads are rarely the problem, its usually a database issue, or just a shit load of API calls to load different menus that would be done in one call with server side rendering.
  - rmdashrfstar 7y ago
    Why would I choose server side rendering? If I build the site in vue with the most optimized output settings, append hashes to files for perfect caching, drop the files in an S3 bucket, throw a CloudFront CDN on top of it with gzip compression, and build the front end of my backend as a REST api sitting in a lambda function that serves HTTPS requests, I never have to worry about server costs being more than pennies a month unless I need to add on other services to my backend.
petilon 7y ago
Here's the perfect React replacement for you: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder It is a 200-line library, and you get React's templating technology, which is the best part of React. You can use jQuery for updating the screen.
- schwartzworld 7y ago
  The templating is almost a non issue. The best parts of react are top-down data flow and its diffing engine. Nobody should be using jQuery in 2019 unless you need to target very old browsers. Vanilla JS works fine for the DOM.
- kls 7y ago
  The best part of React is the virtual DOM, the templateing technology is not novel.
y-c-o-m-b 7y ago
When I first started at my current company, everything was written in jQuery. It was a jumbled mess with thousands of duplicated jQuery code and HTML. The slightest change would make us cringe. Granted this was a poorly designed application from the start, but still. I learned how to build dynamic web pages off of jQuery and for that I'm very grateful. I also appreciated the way there was little overhead if you just wanted to create something simple. When HQ gave our business unit the task of redesigning the entire UI in whatever way we wanted - as long as it looked like the mockups - we decided it was time to move on from JQuery. I had some experience with Angular 2+ at the time, so I tried that one first, but it was too heavy. Same with React for the reasons you outlined. The learning curve on both were steep as well. Then I came across Vue. When I learned I could easily create an app as quickly as I could in jQuery, without all the dependencies, I knew I found a winner. We moved forward with Vue and although eventually we couldn't avoid npm/node, I still think it's the most beginner friendly and lightest JS framework of them all. That's just my opinion of course, i'm sure plenty will disagree. Here's an article demonstrating how it can be used without node/npm: https://medium.com/@steveolensky/create-a-spa-vuejs-application-without-node-webpack-or-any-other-build-process-using-vue-router-b9bf8e36e958 https://medium.com/@steveolensky/create-a-spa-vuejs-applicat... EDIT: BTW that article includes Vue-Router and some other frameworks, but you don't have to use any of it. You can simply include vue.js into your HTML pages just like jQuery and write Vanilla JS for the most part, with the added benefit of turning duplicate code into components. Win-win.
deleted 7y ago
[deleted]
pier25 7y ago
If you like that way of working try replacing jQuery with Vue. No need to use Webpack, Babel, etc, but you will get lots of nice modern features that will make your life easier.
kls 7y ago
It's pretty much been the standard way to develop UI's since smalltalk. If you look at the old Windows (IIRC 95) render loop, and squint just enough you see react. It's not the greatest, but no one has devised better way to do large app UI dev across teams other than component models. React is just that model bolted onto JavaScript much like the win api was for C++. Before jQuery there was Dojo and by a few months YUI, React is really just a focused and cleaned up version of Dojo's component lifecycle model. React's novelty was the virtual DOM and it was a big leap in realizing web components without sacrificing performance. jQuery got popular because it was easy, and good for quick and dirties, but it fails when you try to scale it to more than a few developers. It's not a bad tech but you can paint yourself into a corner with it pretty quick if you have to scale it across a team. You see bad code happens. Black boxing is a way of limiting bad codes impact on the overall system, because it is easier to rip it out and replace it. Functional programming is black boxes for back end business logic. Components are black boxes for the UI. It protects me from you and you from me and therein lies the importance of it.
yazan94 7y ago
... Looks around ... Noone is bashing Angular, whew!

louismerlin 7y ago

I've been using Preact and the Parcel Bundler for my small projects, I'm able to build awesome stuff like I would with React, but with a few kbs of dependencies and no configuration file !

FlorianRappl 7y ago
This is the way. Unfortunately, many people don't know about Parcel and assume that adding 20 Webpack plugins (plus their configuration) is a proper way.
flanbiscuit 7y ago
+1 for Preact! Shout out to Svelte as well. If you can, don't use it to render entire pages. Use it for only the dynamic parts.

chrisweekly 7y ago

Maintaining state by writing directly to the DOM is pretty fundamentally "weird" too, if you think about it.

madprops 7y ago

Having dependencies might not be a huge problem. But I've made some pretty complex interfaces using nothing but jquery, handlebars, and other util libraries. All patterns thought-out and written by myself. Not once did I feel I needed something more complex. I get the impression all the hype followers of front end frameworks might not have the best idea of what they're doing. Especially when you see people commenting about frameworks like angular/react/vue making jquery obsolete, because one is just a syntax enhancement library for dom manipulation, the others are predefined workflow patterns. I guess if you have to work on teams, or more corporate-y stuff, frameworks make sense, because programmers can be easily added or replaced. But luckily I've had the freedom to work on my own projects by myself, so I get the freedom to define whatever structure I see fit. Fun story: Somebody lectured me on how I should adapt my application to use one of those frameworks because it would reduce the code size according to him. Months later he complained about how he did just that with his application only to realize it made it more needlessly complicated and bloated.

tekkk 7y ago
It's exactly because I don't have to think about everything by myself, I'm completely happy using somebody else's well-maintained library and adding it in. It saves time, mine and everyone else's, and frees it up to do other things. "I guess if you have to work on team" - wait you never work with other people? I think that's kinda the basic requirement for many software projects that they scale outside one person coding in a basement or cafeteria. It's just that if nobody except you can understand the patterns you've created the code is not very maintainable in the long run. Sure it's probably fast and slick, but when you're gone can the next guy read your code? And more importantly, build on top of it?

FlorianRappl 7y ago

I just saw three dependencies (arguably even less): https://www.npmjs.com/package/react https://www.npmjs.com/package/react Don't know how you reach your conclusion.

throwaway_bad 7y ago
If you generate a typical react app with create-react-app, you get ~1000 dependencies in node_modules: `npx create-react-app some-app-name --typescript` (it was actually exactly 1000 dependencies which is freaking me out because the number was so round. wondering if it am counting lines wrong `ls | wc -l`)
- codecurve 7y ago
  And 997 of those are development tooling dependencies that are not included in the application that you eventually deploy. Don't get me wrong, I would rather there were fewer development dependencies too, but they are tooling abstractions that you are _opting-in_ to. If that is still a cognitive burden, then there's nothing to stop you using React a build step through a CDN.
  - mister_hn 7y ago
    And you just need 1 to fail to break the whole chain (think to backdoored / taken over npm packages)
- tqkxzugoaupvwqr 7y ago
  Your ls command may create columns. To list one item per line and count the lines: `ls -1 | wc -l`
  - helb 7y ago
    ls usually switches to one column automatically when it's output is piped: https://i.vgy.me/cNfMzV.png https://i.vgy.me/cNfMzV.png
- 7y ago

benbristow 7y ago

Try build a complex website with complex journeys and a component architecture and you'll be begging for React. It's probably because you haven't seen the light. I'd never ever go back to using jQuery unless it was for a basic marketing site - even then I'd probably think of using Vue if anything got more complex than a carousel on the page.

collyw 7y ago
Keep the majority of the rendering server side and it isn't a problem at all. Jquery for some UI enhancement.
- benbristow 7y ago
  Then you end up having the page refresh loads of times and having a less smooth experience.
  - kickopotomus 7y ago
    There are ways around that. E.g. turbolinks[0]. [0]: https://github.com/turbolinks/turbolinks https://github.com/turbolinks/turbolinks
  - collyw 7y ago
    All the SPA apps I have worked on have been significantly slower than the server side rendered apps I have written myself. Page refresh loads are rarely the problem, its usually a database issue, or just a shit load of API calls to load different menus that would be done in one call with server side rendering.
- rmdashrfstar 7y ago
  Why would I choose server side rendering? If I build the site in vue with the most optimized output settings, append hashes to files for perfect caching, drop the files in an S3 bucket, throw a CloudFront CDN on top of it with gzip compression, and build the front end of my backend as a REST api sitting in a lambda function that serves HTTPS requests, I never have to worry about server costs being more than pennies a month unless I need to add on other services to my backend.

petilon 7y ago

Here's the perfect React replacement for you: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder It is a 200-line library, and you get React's templating technology, which is the best part of React. You can use jQuery for updating the screen.

schwartzworld 7y ago
The templating is almost a non issue. The best parts of react are top-down data flow and its diffing engine. Nobody should be using jQuery in 2019 unless you need to target very old browsers. Vanilla JS works fine for the DOM.
kls 7y ago
The best part of React is the virtual DOM, the templateing technology is not novel.

y-c-o-m-b 7y ago

When I first started at my current company, everything was written in jQuery. It was a jumbled mess with thousands of duplicated jQuery code and HTML. The slightest change would make us cringe. Granted this was a poorly designed application from the start, but still. I learned how to build dynamic web pages off of jQuery and for that I'm very grateful. I also appreciated the way there was little overhead if you just wanted to create something simple. When HQ gave our business unit the task of redesigning the entire UI in whatever way we wanted - as long as it looked like the mockups - we decided it was time to move on from JQuery. I had some experience with Angular 2+ at the time, so I tried that one first, but it was too heavy. Same with React for the reasons you outlined. The learning curve on both were steep as well. Then I came across Vue. When I learned I could easily create an app as quickly as I could in jQuery, without all the dependencies, I knew I found a winner. We moved forward with Vue and although eventually we couldn't avoid npm/node, I still think it's the most beginner friendly and lightest JS framework of them all. That's just my opinion of course, i'm sure plenty will disagree. Here's an article demonstrating how it can be used without node/npm: https://medium.com/@steveolensky/create-a-spa-vuejs-application-without-node-webpack-or-any-other-build-process-using-vue-router-b9bf8e36e958 https://medium.com/@steveolensky/create-a-spa-vuejs-applicat... EDIT: BTW that article includes Vue-Router and some other frameworks, but you don't have to use any of it. You can simply include vue.js into your HTML pages just like jQuery and write Vanilla JS for the most part, with the added benefit of turning duplicate code into components. Win-win.

deleted 7y ago

[deleted]

pier25 7y ago

If you like that way of working try replacing jQuery with Vue. No need to use Webpack, Babel, etc, but you will get lots of nice modern features that will make your life easier.

kls 7y ago

It's pretty much been the standard way to develop UI's since smalltalk. If you look at the old Windows (IIRC 95) render loop, and squint just enough you see react. It's not the greatest, but no one has devised better way to do large app UI dev across teams other than component models. React is just that model bolted onto JavaScript much like the win api was for C++. Before jQuery there was Dojo and by a few months YUI, React is really just a focused and cleaned up version of Dojo's component lifecycle model. React's novelty was the virtual DOM and it was a big leap in realizing web components without sacrificing performance. jQuery got popular because it was easy, and good for quick and dirties, but it fails when you try to scale it to more than a few developers. It's not a bad tech but you can paint yourself into a corner with it pretty quick if you have to scale it across a team. You see bad code happens. Black boxing is a way of limiting bad codes impact on the overall system, because it is easier to rip it out and replace it. Functional programming is black boxes for back end business logic. Components are black boxes for the UI. It protects me from you and you from me and therein lies the importance of it.

yazan94 7y ago

... Looks around ... Noone is bashing Angular, whew!