26 ms·
We have recently implemented Angular4 in our project, and have started to pick it up. Recently picked up a story that was adding a simple confirmation modal to
by revscat 9y ago
We have recently implemented Angular4 in our project, and have started to pick it up. Recently picked up a story that was adding a simple confirmation modal to a page: "Alert" text in the top, body with some warning text, and a yes/no button.
This was my first experience with modern JavaScript frameworks and TypeScript. I wanted to do it right, so worked closely with team members who were more versed in this stuff, and followed the various recommended best practices.
By the time all was said and done the PR for this thing had 27 files in it.
For a modal.
This seems ludicrous to me. The frustration, somewhat humorous, expresses by TFA is completely understandable, though. While I came to appreciate TS, I'm still skeptical about this JS framework stuff. They seem overly complicated to me. (While I have only read casually about React, it seems similar in this regard.)
- aaron-lebo 9y agoYeah something's not right. A modal is a line of code, not 27 files. The most extensible modal could be a single file component. Just starting fresh, what is a modal? It's a widget (we could use a div) which when activated is moved to the front of the z axis and steals focus. CSS can do that. Now all you need it do is keep attributes regarding the text of the modal and state representing whether it's activated (we can juse a regular JS object for both), and you've got a working modal. Some of the frameworks are needlessly complex, which is frustrating, because it's hiding something very basic.
- thunderbong 9y agoI agree with the GP with regard to Angular4. But have you really tried to create a modal in HTML/CSS/JS without any framework? It's surely not one line of code!
- aaron-lebo 9y agoOK, so it's a dozen. https://stackoverflow.com/questions/25920941/how-do-i-overlay-a-popup-view-in-mithril-js https://stackoverflow.com/questions/25920941/how-do-i-overla... Didn't say not to use a framework. Use it and some CSS and that's a basic task, not to mention there are other libraries which do it for you already.
- onion2k 9y agoDoes that work in several versions of different rendering engines that date back a decade, at resolutions from 800x600 to an iMac 5K screen? How about on tablet and mobile devices? What happens when the user's scroll position is half way down the page? Does it listen for events to update or close itself? A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. If you have a simpler use case then you don't need all that extra edge case handling, but that doesn't mean it's not pointless code.
- aaron-lebo 9y agoWhat's the likelihood that he's supporting engines going back a decade? Modern rendering engines and CSS handle that pretty well. IE 8 is 8 years old. Bootstrap 3 supports IE 8 and has modals. Point being, you can either write up a simple modal if you are targeting semi-modern browsers and don't need much, or you can use one of a dozen libraries that do this, but 27 files sounds pathological.
- Silhouette 9y agoA good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. No. Sorry, but that's just nonsense. A modal is probably going to be rendered as an HTML div element, styled so it appears with a fixed centre-viewport position. You probably also want a second div as an overlay to de-emphasize the rest of the page while the modal dialog div is visible. You might want a standard X button to close the dialog, which hides the above when it's clicked. You can write all of that in less than a screenful of code, and you can do it using nothing but basic web standards that are supported as far back as IE8 and iOS5 -- in other words, well before the browser generations that even Microsoft and Apple themselves still support today.
- simion314 9y agoYou need more functionality for a non basic modal, first problem is if you have 20 modals you want not to copy paste over and over again. For non basic modals you also need events to know if user accepted or dismissed the modal, you want the Escape key to also work, you want the option to allow or not closing the modal when clicking outside of it, The project I work on uses bootstrap, this means in the main html file you have copy pasted same html boiler-plate with only the content change, somewhere there is a button that has a special attribute that magically opens this modal(bootstrap js does that in the background), this does not scale and we searched for a good library so we can put each modal in it's own file and we also needed full control to create the modal if and when we needed it and not have it loaded in the main html but hidden. The solution would be to have modals implemented as standard and not having to hunt for a library because the lib we used is for angular+bootstrap but it will not work for react+bootstrap or for no framework projects.
- 0xFACEFEED 9y ago> This seems ludicrous to me. Why? UI is hard dude. UI on the web is especially hard because the technology has been growing progressively for over two decades.
- busterarm 9y agoAgree. More importantly, I see this nasty trend where people bag on jQuery code just because it's jQuery code. I've seen devs complain about how coupled some small jQuery one-liner is and then replace it with some muli-hundred line monstrosity of a module that's buggy, incredibly hard to understand and impossible to actually reuse...then when you call them out on it, they just say "fuck you, we're writing ES6 now". The code they replaced was simple, just worked and didn't have side-effects. And they're still using jQuery elsewhere in their project anyway...
- ktRolster 9y agoUI is hard dude. It's been a solved (and re-solved) problem for decades.
- ng12 9y agoThere's been a pervasive meme that JavaScript is terrible jQuery is a spaghetti factory. Which is it?
- ktRolster 9y agoWith the way callbacks work in Javascript and jQuery, you lose some flexibility in organizing your code. It is true the types in Javascript make it difficult to build large projects. These drawbacks can be overcome, of course, but this is all orthogonal to the main point...... If Javascript and jQuery truly are bad (though I would claim they are not, they are mediocre but workable), it's because their creators didn't know history, not because the problem is unsolvable.
- concede_pluto 9y ago
- seanwilson 9y ago> Recently picked up a story that was adding a simple confirmation modal to a page: "Alert" text in the top, body with some warning text, and a yes/no button. > By the time all was said and done the PR for this thing had 27 files in it. Can you not just use a library for this and do it in a few lines...? I found Angular 2 verbose but I don't see how the above is common. I just did something similar in Vue today and it was about 4 lines to load the library and call it. You shouldn't be implementing modals yourself if you can avoid it.
- cknoxrun 9y agoOr, perhaps instead of a library, use the built in browser confirmation dialog?
- seanwilson 9y agoThat's not an option for anything but maybe enterprise apps because the dialog styling is just too ugly usually.
- gkya 9y agoThis is completely subjective.
- simion314 9y agoYou may need modal that contain complex html not only text, imagine a modal that shows a video and a do not show again checkbox.
- Can_Not 9y agoThe native dialogs are defacto bad user experiences. Previous discussion: https://news.ycombinator.com/item?id=11745127 https://news.ycombinator.com/item?id=11745127
- edem 9y agoNot ludicrous, but ridiculous.
- robocat 9y agoI suspect your frustration is due to your team. However Angular isn't helping either: http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box http://jasonwatmore.com/post/2017/01/24/angular-2-custom-mod... A good set of components for your library of choice should make a modal dialog that works and has flexibility e.g. https://bootstrap-vue.js.org/docs/components/modal/ https://bootstrap-vue.js.org/docs/components/modal/ That said, a modal dialog can be very hard to implement, depending upon needs (centering in viewport, mobile devices, stacking multiple modals, form modals with popup controls above them, preventing tab key allowing focus to go to form behind, plus many other hard issues!)
- oelmekki 9y agoI've been doing heavy javascript interfacing since the end of the 2000' (it was still a rare skill back then, and made me good freelance money), and I totally understand how you feel. I experienced the same thing when learning angular, flux and redux. It all screamed "overengineering" to me. But then I realized why it was that way, and why it had to be : you now have teams of like 50 js developers working on the same codebase. They have to have very strict and complex architecture, because their frontend codebase is just as big, if not more, than their backend codebase. Those tools still lack alternatives for small to middle sized teams and products, IMO. React by itself is super cool to be quickly productive in that scope, but state management systems are not. For that reason, I made my own flux library, meant to keep things conceptually simple. The flux pattern by itself (data always propagating in a single direction) is not complicated, its implementations are. I would recommend that small teams working on small products take time to get the flux idea, then make their own implementation, it's worth it. EDIT : to be more specific, here is a simple thing to do to make your own implementation: 1. build something (let's call it a store) with a `subscribe(func)` method allowing to be notified when data changed 2. add a public api to that store (`like store.addArticle(article_data)`) 3. in the `componentDidMount()` method of your root component, subscribe to store with a function that calls `setState()` on your component, then pass data as props to child components 4. when triggering an action, like clicking a button, call a method from the public api of your store 5. you now have a state manager ensuring data always flows in the same direction, and you can make your store implementation as simple or as complex as you want
- Silhouette 9y agoThe example you edited in makes your point very well. Essentially, you're describing a simple MVC design, with a couple of React-specific details for rendering your view. In desktop world, we were using this sort of software architecture decades ago. It's only a combination of modular design, separating state from presentation, and an observer, and these are all well-established principles that have stood the test of time. Countless developers have written something like this at the start of countless new projects, and they probably did it in five minutes without a second thought. The difference In modern JS world is that some people talk as if you need 197 dependencies, a whole build process and a team of 5 just to maintain it. You really don't, and the frameworks and build systems that push in that direction make my head hurt.
- d0m 9y agoMaybe a sign that things are too coupled through. Can make the same argument on any project, I.e. wanted to add small feature, ended up changing 27 files.
- jbergens 9y ago27 files sounds absurd. Maybe you're doing more than adding a store with some action? I used mobx with react and a new store is 1 file, including its actions. Connecting it to components takes a few lines per component. Redux may use more files but they are short.