Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Primer for Building Single Page Applications with React

github.com

Post reply on HN
Print view View original

71–80 of 145 posts

Re: A Primer for Building Single Page Applications with React

#71

Post by lobster_johnson »

unklefolk wrote: post #12

Honest question here from someone new to React. Isn't the way it mixes in HTML, CSS classes and JS altogether something we were trying to get away from a few years ago? It feels a bit like old school ASP! I'm not trying to be flippant, I just was always taught about separation and mixing HTML markup with JS logic seems like we are going the other way.

In addition to what skrebbel said, let me clarify that React doesn't encourage you to mix _all_ logic with presentation, only that logic which relates to presentation; everything else ("business logic") belongs elsewhere.

The core idea is that presentation logic belongs with the presentation; you cannot separate the two. In classical MVC frameworks such as Cocoa, this is accomplished with a controller that is tightly coupled with its view. Most people use Interface Builder and maintain the view in a separate file, but this is purely a pragmatic design allowing IB to use a different file format from your code. You could write the entire UI in Objective-C/Swift code, right in the controller, and in terms of layering there would not be a lick of difference.

React, like other MVC-bases systems, encourage the UI logic to be slim and strictly UI-oriented, and to move the application logic -- that which deals with the flow of data/state -- to a separate layer.

Re: A Primer for Building Single Page Applications with React

#72

Post by lobster_johnson »

timepiece wrote: post #70
kyllo wrote: post #47

Earlier quoted context omitted.

Just because your HTML, JS and CSS are in different files doesn't change the fact that they are tightly coupled. React dispenses with this superficial separation and groups presentation, behavior and styling of the same UI element together. I've found it much easier to reason about.

But if these individual components share any code between them, you'd still have to write the same lines over and over again for each component. So, how do you reason about that?

There is no reason that components can't share code. It's just JavaScript. Extract common code into libraries, mixins or even components.

For example, we frequently create generic containers that modify the behavior of the child or parent. One example is a container that automatically sets its children to be "sticky" once you scroll past it. Another common parent is one that renders it's children is a modal (lightbox, dialog or similar). Another is a child component that, if you nest it into another, can notify the parent whenever its dimensions change.

Re: A Primer for Building Single Page Applications with React

#73

Post by danesparza »

JDDunn9 wrote: post #5

Can you build an SPA using just React? At the very least it seems like you'll need a URL router, and something like underscore.js to fill in the gaps.

Yes. I have built a few. The router I chose was Flatiron director (link: https://github.com/flatiron/director ). I used jQuery for Ajax calls. Everything else was React + Flux.

Re: A Primer for Building Single Page Applications with React

#74

Post by Bahamut »

BinaryIdiot wrote: post #63
skrebbel wrote: post #17

Earlier quoted context omitted.

> Isn't the way it mixes in HTML, CSS classes and JS altogether something we were trying to get away from a few years ago? That's a best practice for web sites. If you're making a website (where every page has roughly the same look and structure, but just different content), then it's probably a good best practice to have. It all went haywire, however, when using the web for applications . While well-designed applica…

> It turns out that separating logic and presentation in web applications the way you would on web sites is a very bad match. You simply end up putting logic that is very closely tied together in three different places. As a web developer for the past 10 years I can't disagree with this more. It wasn't the easiest thing to accomplish maybe 5 years ago but it was always doable and now with web components it's incredib…

Web Components does what React essentially does, bring them together.

Re: A Primer for Building Single Page Applications with React

#75

Post by JustSomeNobody »

emehrkay wrote: post #49
pjtops wrote: post #33

Earlier quoted context omitted.

What about desktop/mobile applications - is it ok to mix your logic and presentation there?

This is a great question. The little iOS development that I've done it seems like the script and style are tied together with the markup. I think about how painful it would be adding a custom button(new behavior) to a notification on a website: you either add an event listener to the dom and listen for it to bubble or add it to the button directly(the easier option). These new web frameworks seem to be adding it dire…

Not familiar with react and barely JavaScript, but why is bad? I mean as longs as the function calls a function on another module and doesn't contain any more logic than that. The other module remains testable, and the only logic in the UI is a function call. If the interface of the module changes, sure the UI would have to change, but I tend to think people over think things at this point (my opinion and I hope it doesn't distract from my original question).

Re: A Primer for Building Single Page Applications with React

#76

Post by woah »

timepiece wrote: post #67
rpedela wrote: post #66

Earlier quoted context omitted.

> You seem to focus only on the few drawbacks of CSS inheritance and to ignore its biggest advantages like you don't have to write declaration for every and each element on the page and rely instead on inheritance for props to cascade properly. This presentation explains what problems React inline CSS solves. https://speakerdeck.com/vjeux/react-css-in-js EDIT: I gave wrong presentation link initially.

This presentation explains what problems React inline CSS solves Could you please summarize in a few sentences what are these probs this approach deem to solve? Because I have seen demos and talks from React people and I was appalled at their neglect of best practices and bending the rules just to push their product and technologies on the community

I'm curious, which demos and talks are you referring to?

Re: A Primer for Building Single Page Applications with React

#77

Post by woah »

pjtops wrote: post #33
skrebbel wrote: post #17

Earlier quoted context omitted.

> Isn't the way it mixes in HTML, CSS classes and JS altogether something we were trying to get away from a few years ago? That's a best practice for web sites. If you're making a website (where every page has roughly the same look and structure, but just different content), then it's probably a good best practice to have. It all went haywire, however, when using the web for applications . While well-designed applica…

What about desktop/mobile applications - is it ok to mix your logic and presentation there?

My experience with iOS development is that you just have to hack things together in whatever way works. Frequently you'll get a screen 70% of the way there with slick but inflexible visual editor, then need to copy and paste a bunch of imperative methods to modify things further at runtime. All of this separation of concerns stuff is a bit lofty for iOS.

Re: A Primer for Building Single Page Applications with React

#78

Post by nwienert »

timepiece wrote: post #50
unklefolk wrote: post #12

Honest question here from someone new to React. Isn't the way it mixes in HTML, CSS classes and JS altogether something we were trying to get away from a few years ago? It feels a bit like old school ASP! I'm not trying to be flippant, I just was always taught about separation and mixing HTML markup with JS logic seems like we are going the other way.

Absolutely, React is in the wrong here and its methodology is a clear and direct violation of the "separation of concerns" principle. First, they came for the HTML markup and said "come on guys, JSX is just some XML on steroids. You should not worry at all" and we didn't speak up. Then they came for CSS and said "come on guys, they're just small components and the same as placing the CSS declarations via the style at…

I've actually never found myself more productive than with React, by a long shot. The reasons why mixing them together makes sense are above us in the thread, but I'd highly recommend vjeux's presentation on CSS in JS:

https://speakerdeck.com/vjeux/react-css-in-js

I have apps in production with it you can look at the code to as well:

https://github.com/reapp/hacker-news-app

Re: A Primer for Building Single Page Applications with React

#79

Post by timepiece »

woah wrote: post #76
timepiece wrote: post #67

Earlier quoted context omitted.

This presentation explains what problems React inline CSS solves Could you please summarize in a few sentences what are these probs this approach deem to solve? Because I have seen demos and talks from React people and I was appalled at their neglect of best practices and bending the rules just to push their product and technologies on the community

I'm curious, which demos and talks are you referring to?

One of those done at the latest ReactJS Conf where they introduced React Native. Check their channel on YT for the info.

Re: A Primer for Building Single Page Applications with React

#80

Post by tilt »

nileshtrivedi wrote: post #46
Cshelton wrote: post #32

Hey by the way, the slack channel, Reactiflux, is actually pretty strong, check it out. Many people there are actually using React on large scale apps, myself included, and there is plenty of discussion.

How do I join? It seems I need to be invited by the team admin.

Request an invite from http://reactiflux.com/
Post reply on HN