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

51–60 of 145 posts

Re: A Primer for Building Single Page Applications with React

#51

Post by masklinn »

matthewmacleod wrote: post #27
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.

I do undestand where you come from there, but I'd view this as a bit different. React's building block is the 'component' – the idea being that this is an isolated part of the application. By its very nature, isolating a component means separating the HTML from all the other HTML, and the script from all the other script. Since components are generally quite small, it makes sense to bundle these together. You don't s…

> CSS is a separate issue – React doesn't mix CSS into the pot at all.

Not quite true, ReactNative does, React supports it[0] and one of the lead devs (vjeux, gave the reactjs conf 2015 keynote) has a presentation on doing exactly that[1] alongside being the lead dev on Facebook's css-layout (which IIRC underlies ReactNative's layouting)

[0] https://facebook.github.io/react/tips/inline-styles.html

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

[2] https://github.com/facebook/css-layout/graphs/contributors

Re: A Primer for Building Single Page Applications with React

#52

Post by timepiece »

skrebbel wrote: post #37
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?

> Is a highly dynamic site really a "get out of jail free card" for best practices? No, of course not. React proposes to replace one "best practice" by a different one. In React, the best practice is to divide your application up in a deep hierarchy of components, each of which adds one single little layer of abstraction over the other. Then, put all the logic and presentation that's relevant for that little piece of…

it's difficult for the programmer of a parent component to influence the behavior of the child component

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.

Yeah sometimes undesired consequences occur on elements but it's easy to remedy the situation if you know what are you doing but by moving all the presentation info to your logic layer in development, and then littering the structure/content layer i.e. HTML via style attribute in run time, this is unacceptables and can't be seen as progress for the industry in any way.

Re: A Primer for Building Single Page Applications with React

#53

Post by odiroot »

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 my humble opinion it makes sense. At least in this direction, when (seemingly) JS code is generating the presentation layer (HTML in this special case).

In contrast to Angular where we're told to put logic in templates (or just HTML files) it looks a lot better.

Re: A Primer for Building Single Page Applications with React

#54

Post by masklinn »

philbo wrote: post #41
matthewmacleod wrote: post #27

Earlier quoted context omitted.

I do undestand where you come from there, but I'd view this as a bit different. React's building block is the 'component' – the idea being that this is an isolated part of the application. By its very nature, isolating a component means separating the HTML from all the other HTML, and the script from all the other script. Since components are generally quite small, it makes sense to bundle these together. You don't s…

Do people generally write tests for these components? I'm wondering how the marrying of presentation and logic affects that.

> Do people generally write tests for these components?

Sure. React even ships with testing utilities to make that easier: http://facebook.github.io/react/docs/test-utils.html

> I'm wondering how the marrying of presentation and logic affects that.

Depends on the exact component. For pure components as part of bigger applications it's really quite easy, just render the component with a known dataset and see if it's got everything where things should be. Then again, that's similar to testing templates… most people don't really test their templates.

For self-contained "widget" components things are a bit harder, it's similar to testing DOM-based widgets really.

Re: A Primer for Building Single Page Applications with React

#55

Post by dada78641 »

loceng wrote: post #38
dada78641 wrote: post #18

Earlier quoted context omitted.

It's undue paranoia. It says essentially the same thing as the Apache 'Grant of Patent License' section. Namely, if you instigate a patent lawsuit, the free patent license offered by Facebook no longer applies. It would be impossible for Facebook or Apache to engage in patent lawsuits if they did not include this termination clause. Besides, Facebook is gonna sue you if you violate their patents, regardless of whethe…

This isn't accurate according to what DannyBee says, an open source lawyer - please read my comment above at https://news.ycombinator.com/item?id=9256093 that includes copy/paste of a comment he's made before. TL;DR: Facebook is changing the BSD license from being an implied license to being an explicit license, so it's not the same as BSD license.

This raises some questions:

* If Facebook is "changing" the BSD license, why is the BSD license included verbatim and in full?

* Also, why does the PATENTS file explicitly state that it is an "ADDITIONAL grant of patent rights"?

* Why don't I see comments like the one I originally replied to being posted on articles pertaining to Apache? They have almost exactly the same wording in their statement.

I'll believe claims of Facebook "changing the BSD license" when they actually change the BSD license.

Re: A Primer for Building Single Page Applications with React

#56

Post by krat0sprakhar »

mbrock wrote: post #16
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.

The "URL router" in my current project begins with "onhashchange = function () {" and is essentially a five line conditional. It might grow to ten lines. All it does is set the root props based on query parameters. Not rocket science. I'm using Fetch.js and a Promise polyfill in order to do AJAX stuff (the native XHR API is a bit tedious). But basically the answer is: yes, you can! You can even write an SPA using not…

I, for one, would love to know more about how this is done. Is your code open-sourced by any chance? Thanks!

Re: A Primer for Building Single Page Applications with React

#57

Post by oe »

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?

Building and application doesn't automatically mean discarding accessibility, SEO or sane URLs. Modern JS-frameworks like React handle them quite easily.

Re: A Primer for Building Single Page Applications with React

#59

Post by loceng »

dada78641 wrote: post #55
loceng wrote: post #38

Earlier quoted context omitted.

This isn't accurate according to what DannyBee says, an open source lawyer - please read my comment above at https://news.ycombinator.com/item?id=9256093 that includes copy/paste of a comment he's made before. TL;DR: Facebook is changing the BSD license from being an implied license to being an explicit license, so it's not the same as BSD license.

This raises some questions: * If Facebook is "changing" the BSD license, why is the BSD license included verbatim and in full? * Also, why does the PATENTS file explicitly state that it is an "ADDITIONAL grant of patent rights"? * Why don't I see comments like the one I originally replied to being posted on articles pertaining to Apache? They have almost exactly the same wording in their statement. I'll believe claim…

It's easier to piggyback on something, for practicality reasons, and perhaps to piggyback on the perception people have of it (maliciously or not).

ADDITIONAL could simply mean added to, not necessarily extra or supplementary - added, as in, included with - an overlay of BSD.

I agree, it'd be good if Facebook was more transparent as to what it all means. Stating that you'll believe it if they modify the actual BSD license, it's far more easy to take an existing - and generally accepted license - and then make an addition instead of making changes to it, no? So you don't have to call it something other than BSD?

Re: A Primer for Building Single Page Applications with React

#60

Post by Retozi »

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 my opinion it is a misconception that React "mixes" representation and logic.

You can _implement_ both representation and logic with React. (instead of JS for logic, and some clunky template language for representation).

This does not mean that you should mix it. usually you end up with "representation" components that are "dumb", and logic components, that do not care about the representation of their children.

see https://medium.com/@dan_abramov/smart-and-dumb-components-7c...

Just because it shares the implementation mechanism, it does not mean that they are mixed together. You can of course, but most of the time, you should not.

Post reply on HN