A Primer for Building Single Page Applications with React • Hacker News Board

Re: A Primer for Building Single Page Applications with React

#111

Post by bphogan » Tue, Mar 24, 2015, 7:31 PM UTC

dagw wrote: post #39

NoGravitas wrote: post #34

Earlier quoted context omitted.

Is the distinction between web sites and web apps really valid, though? No matter how dynamic your site is, you still have certain responsibilities to your users, including giving them the best user experience you can, but also things like accessibility, sane SEO, bookmarkable resources, and, in the long run, maintainability. Is a highly dynamic site really a "get out of jail free card" for best practices?

Accessibility, SEO and bookmarkable resources aren't always a requirement. The GMail app (as opposed to the login page) for example doesn't need SEO. If you're targeting a known specific audience then you don't necessarily have to focus on accessibility. Bookmarkable resourecs doesn't always make sense either, for example if you're making a web based image editor (although I suppose you could create bookmarks into ea…

As a low vision computer user that supports disabled people on the web, and whose father spent 30 years working with disabled people, I can tell you for a fact that for some people, accessibility should be a requirement all the time.

Especially as more things go toward the web.

The disabled is a club anyone here can join, at any time.

Re: A Primer for Building Single Page Applications with React

#112

Post by yazaddaruvala » Tue, Mar 24, 2015, 7:32 PM UTC

timepiece wrote: post #97

lobster_johnson wrote: post #92

Earlier quoted context omitted.

It's not inheritance at all. The code sharing is across interface boundaries, not like inheritance where, say, changing a member variable can break descendant classes. Instantiating a component is just like declaring a variable.

So, you're getting rid of inheritance altogether and settling for this interface boundary sharing notion?

> getting rid of inheritance altogether and settling for this interface boundary sharing

You claim it is "settling" but I'll try to explain why its not only not "settling" but actually encouraging best practices. I'm not sure what language you're most familiar with but since you're talking about inheritance I'll try to provide Java analogies.

Hierarchal components => Hierarchical composition of classes

Mixins => Interfaces with default implementations (possible as of Java 8)

Inheritance, as defined by the OO paradigm, is very rarely the correct solution. Even in a language like Java, when it comes to classes, the best practice is to use composition over inheritance. If you haven't heard this before, or you don't agree, sorry but I'd rather not get into this myself. There are a ton of really good resources online about this, they will do a far better job explaining than I would.

Re: A Primer for Building Single Page Applications with React

#113

Post by yazaddaruvala » Tue, Mar 24, 2015, 7:41 PM UTC

danesparza wrote: post #73

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.

jQuery is a bit overkill for ajax, no?

Checkout: http://youmightnotneedjquery.com/#ajax

Also: http://visionmedia.github.io/superagent/

Re: A Primer for Building Single Page Applications with React

#114

Post by rimantas » Tue, Mar 24, 2015, 8:19 PM UTC

NoGravitas wrote: post #34

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…

Is the distinction between web sites and web apps really valid, though? No matter how dynamic your site is, you still have certain responsibilities to your users, including giving them the best user experience you can, but also things like accessibility, sane SEO, bookmarkable resources, and, in the long run, maintainability. Is a highly dynamic site really a "get out of jail free card" for best practices?

Yes, it is valid. To quote Tantek:

  >  if it’s not curlable, it’s not on the web.

http://tantek.com/2015/069/t1/js-dr-javascript-required-dead

Re: A Primer for Building Single Page Applications with React

#115

Post by Bahamut » Tue, Mar 24, 2015, 8:48 PM UTC

mtrimpe wrote: post #110

JustSomeNobody wrote: post #75

Earlier quoted context omitted.

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 d…

As far as I'm concerned was bad because 'function' was a global variable reference. I don't think that's the case for React though so I'm not sure if the GP saw some other drawbacks in it (apart from the aesthetic of separating logic from presentation.)

In React, you would do (for example) - JSX would interpolate that and set up the appropriate click binding, and the function is local to the component.

Re: A Primer for Building Single Page Applications with React

#116

Post by Silhouette » Tue, Mar 24, 2015, 8:56 PM UTC

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…

I wouldn't call separating logic and presentation bad. I would call that a best practice.

Even if that is true, it is not clear that trying to separate HTML, CSS and JS necessarily achieves a useful degree of separation between logic and presentation.

In "traditional" application development, we have long recognised that things like keeping the underlying data isolated from any particular presentation or interaction style can have advantages. However, you wouldn't find a lot of people arguing for creating a dialog box in some visual design tool in your IDE, writing separate code in a programming language to populate its controls and respond to interactions with them, and then somehow trying to join the dialog and the code up while keeping everything at arm's length.

Modular design has always been about keeping related aspects of a program together and minimising other dependencies. This means you can do useful things like changing one part of a program without running into surprising or uncontrolled side effects elsewhere. But if you have different aspects of the application that inherently do change together, as is often the case with HTML/CSS/JS in a web app, there is little benefit to trying to separate them for dogmatic reasons.

Re: A Primer for Building Single Page Applications with React

#117

Post by xanderjanz » Tue, Mar 24, 2015, 8:58 PM UTC

lol everytime something about React or Flux gets posted on HN, we get this massive comment thread debating how X React feature isn't best practices (Inline styles, full-app re-render, singleton dispatcher or whatever).

Get over it nerds. React is very well thought out, and Just Works™. Your me-too diatribe about how being different is bad doesn't help anything but feed these endless debates. Build apps or die. If you prefer building lousy implicit Rails apps, go wild.

Re: A Primer for Building Single Page Applications with React

#118

Post by timepiece » Tue, Mar 24, 2015, 9:00 PM UTC

yazaddaruvala wrote: post #112

timepiece wrote: post #97

Earlier quoted context omitted.

So, you're getting rid of inheritance altogether and settling for this interface boundary sharing notion?

> getting rid of inheritance altogether and settling for this interface boundary sharing You claim it is "settling" but I'll try to explain why its not only not "settling" but actually encouraging best practices. I'm not sure what language you're most familiar with but since you're talking about inheritance I'll try to provide Java analogies. Hierarchal components => Hierarchical composition of classes Mixins => Inte…

I aint no traditionalist or a Java supremacist :). I'm just an ordinary guy with passion for anything web development and I happen to like javascript a lot.

So, I'm okay with non classical inheritance or any other non conventional constructs that would make our lives easier but I'm really skeptical about the direction that these frameworks is taking the industry as a whole in, and I believe that their lack of enthusiasm for established best practices and breaking the rules without offering well thought and coherent alternatives is worrisome.

Re: A Primer for Building Single Page Applications with React

#119

Post by cc81 » Tue, Mar 24, 2015, 9:05 PM UTC

timepiece wrote: post #102

mejari wrote: post #99

Earlier quoted context omitted.

Why are you looking at this as "bending the rules" instead of as creating new rules for a new way of building web applications? Just hand-waving "best practices" doesn't actually mean that something is best practices if someone else comes up with a better practice.

You guys have to convince us first that mixing content+structure/presentation/logic is the best way to go forward in web development for the following reasons 1,2,3 ..etc. I'm all for progress and challenging/questioning previous norms or traditions. I hate dogma and dogmatic people like the next guy but I need first to see improvement in the new thing before going adopting it. What I see now frankly is the opposite…

You are already doing that in a normal template. Let us say you are building a shopping cart.

The template will contain logic like an iteration over what has currently been put in the basket. And maybe some condition that if the basket is empty you should show a friendly string instead. Then you have some additional logic in a js file that will collapse the list of items if the user does not want to see everything. This is usually done by using a id/class or html element to grab on to.

The idea behind React is that you put all possible states and ways the view can render in a component. You still would (generally) not have actual logic in it; like grabbing data from the server or calculating stuff.

It is different yes but I think it is a neat idea. We will have to see if it is a viable path forward but I think this "rethinking best practices" is really good and has already influenced the rest of the frameworks quite a lot.

Re: A Primer for Building Single Page Applications with React

#120

Post by timepiece » Tue, Mar 24, 2015, 9:09 PM UTC

origin-unknown wrote: post #109

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

My main complaint with CSS in JS is that a strict naming convention solves a lot of the problems without coupling styles in application bundles. Basically, I don't want to invalidate my JS bundle just to include a new visual theme. Luckily, you can use CSS best practices with React. The problems mentioned in the presentation, followed by some CSS-friendly solutions -- 1) Global namespace: all selectors are global Use…

Seriously, all these points sound very fancy and I suspect that they bring unequivocal productivity gain to the dev environment but my main beef with FB or any other org is that they push this workflow or other methodologies as universal best practices or even distort reality and claim that mixing content/presentation/logic is the only right way to "separation of concerns" and all what you knew before about this topic is a hoax and big lie.