
Mern: Build JavaScript apps using React and Redux - sinkensabe
http://mern.io/
======
batat
FRAMEWORK (shitty tragedy in one act)

Dramatis Personae

PROGRAMMER, programmer

HIPSTER, hipster

* * *

ACT I

 _Small room. There are a table with paper stacks, opened "Perrier" bottle,
two huge monitors and a programmer sitting behind. Programmer reads papers,
looks on first monitor, then on second and typing something. From time to time
he says "damn idiots". Number of "damn idiots" is divided equally between
papers, first and second monitor._

 _Door opens loudly_

PROGRAMMER: Who's there?

 _Hipster runs into waving his hands_

HIPSTER: Framework! New awesome framework! Just look, it's awesome! Just look!

 _Programmer looks into hipster 's iPad_

    
    
      @moccachino.render()
      helloWorld({
        view: "myProject.sample.view.Hello",
        div: "myContainer",
        data: {
          message: "Hello World!"
        }
      });
    

_then takes a "Perrier" bottle and smashes on hipster's head. Hipster falls on
the floor._

PROGRAMMER: Damn idiots.

Exeunt.

(sorry for my English)

~~~
Stamy
I don't see the reason why would you apologise for your english when you use
the words like 'Exeunt' ... Otherwise good joke.

~~~
omk
Probably because the author was compelled to choose his words wisely to comply
with forum policies. In essence "damn idiots" is a toned down version of
something far more expressive.

~~~
dang
We don't give a shit if you swear. Civility is about how people treat each
other.

~~~
pierrec
Really? Several times I thought I saw threads mysteriously being ranked
downwards, only to find out they contained a formal (or other) discussion of
swear words, so I always concluded that there's some sort of "shitstorm
detector" at play. But maybe I'm just imagining things...

~~~
dang
Your observations were probably real but you might have misinterpreted them.
We do penalize subthreads for being shitstorms, flamewars, or off-topic.
(Tediously off-topic, that is. Whimsmical offtopicness is fine.) And profanity
is more common when people are upset, so one would expect a correlation. But
profanity isn't a moderation concern per se.

------
drinchev
So this is a repo that is being cloned on your computer [1]. I have a couple
of questions :

1\. Why not just creating yeoman generator?

2\. Don't you think it is too opinionated and inflexible to be useful?

1: [https://github.com/Hashnode/mern-
cli/blob/master/lib/main.js](https://github.com/Hashnode/mern-
cli/blob/master/lib/main.js)

~~~
Kiro
I much rather clone than use yeoman. What is the benefit?

~~~
shocks
Well yeoman can be configured to ask you questions about the setup you want.
Think "less or sass?"

------
meow_mix
This was a really bad time to post this framework, the disillusionment for
javascript is at an all time high right now.

That being said why Mongodb? NoSql are advantageous for write speeds, which as
far as I know isn't particularly important for new applications. I understand
that you want "javascript everywhere" but is that really worth the cost of
losing the speedy and convenient join statements? I think postgres might have
been a better choice.

~~~
dceddia
I can't say if they considered other databases, but "MERN" is a play on "MEAN"
(Mongo, Express, _Angular_ , Node) -- I imagine they were aiming for a React-
centric version of the popular MEAN stack.

~~~
pygy_
Waiting for the NERD stack.

Node, Express, React, $DataBase.

~~~
ravendug
There's no need to wait: [https://github.com/Xantier/nerd-
stack](https://github.com/Xantier/nerd-stack)

~~~
pygy_
Crikey... What a world we're living in!

~~~
batat
Could be a drinking game: pick random word, add "js" and google for it. If
google finds something related, take the shot.

------
q-base
Not that it has any practical implications, but I grew up next to a tiny tiny
town in Denmark that was called exactly Mern. Famous for being full of people
who wanted to fight.

------
bijection
FWIW 'isomorphic javascript' was pretty much supplanted by 'universal
javascript' last year per this medium post [1]. You might consider changing
the copy.

Edit: At the very least Dan Abramov (Redux creator) is ok with universal [2]

[1] [https://medium.com/@mjackson/universal-
javascript-4761051b7a...](https://medium.com/@mjackson/universal-
javascript-4761051b7ae9)

[2] [https://github.com/gaearon/react-redux-universal-hot-
example](https://github.com/gaearon/react-redux-universal-hot-example)

~~~
prank7
Lets not get caught in 'war of words'. There is no standard to it and I don't
think it matters as long as you understand what it means.

~~~
egwynn
> There are only two hard things in Computer Science: cache invalidation and
> naming things.

> \-- Phil Karlton

~~~
cjslep
I like the self referential version:

"There are only two hard things in Computer Science: cache invalidation,
naming things, and off-by-one errors."

------
juretriglav
Your demo needs fixing, it's open to XSS and that has been tried and tested,
as expected for this crowd. :)

~~~
g_delgado14
As a curious noob, could u explain what is the source of the XSS vulnerability
in this case? Is it simply that the site isn't being served over tls/ssl?

~~~
rohanprabhu
Not sanitizing input, by either scrubbing out any <script> tags, or escaping
those characterst to html entities.

~~~
kolme
Please don't "sanitize" input, just escape accordingly.

"<script>" might be a legitimate input.

~~~
eterm
You need both. Sometimes the legit input is HTML such as from rich text
editors. In those cases if someone types a bold <script> then the form should
submit the escaped <b>&lt;script&gt;<b> but also needs to sanitise to make
sure that other HTML element types are not present.

If you escape one step further you'll lose formatting or the message, so
sanitisation is important too, it is reductive to say "always escape never
sanitise".

~~~
windsurfer
I think your first problem is whitelisting HTML entities. Unless you're
composing HTML-formatted email, it's usually better to use a different markup
syntax like a minimal markdown or asciidoc that can safely be escaped.

~~~
eterm
I agree, although for non-technical users, the better wysiwyg editors are
still HTML based, unless you have a recommendation for an in-browser wysiwyg
editor that returns/exports markdown?

------
tfgg
The page keeps mentioning 'isomorphic apps' but I have no idea what those are.

From googling, they appear to be JS code that can run client and server-side?
Not what I would have guessed!

~~~
tomelders
It's one of those instances where developers went looking for a word that
perfectly articulates what it's doing, but is so esoteric as to be useless.

> being of identical or similar form, shape, or structure

I call it fronty-backy-samey-samey and everyone knows what I'm talking about.

~~~
mbrock
It's not really esoteric... it just kind of has the wrong connotations,
because it's used rigorously in mathematics, and here it just means "portable
between different JavaScript runtimes," pretty much.

To me the word makes me imagine a web application that can parse its own
rendered HTML and get back the application state. Which sounds kind of
interesting...

~~~
dsp1234
_it just kind of has the wrong connotations, because it 's used rigorously in
mathematics_

And the original use was in Philology[0]. Just because a word has two
different meanings in two different contexts doesn't means it's wrong. I'm
certainly glad the linguists didn't get up in arms when the mathematicians
gave the 'wrong connotation' to isomorphism.

[0] -
[https://books.google.com/books?id=hZpeAAAAcAAJ&pg=PA711&lpg=...](https://books.google.com/books?id=hZpeAAAAcAAJ&pg=PA711&lpg=PA711&dq="Elements+of+Comparative+Philology"+"isomorphic")

~~~
mbrock
Well, I didn't mean to claim it's prescriptively wrong, just that to my mind,
maybe because I've been around a lot of mathematicians and coded a lot of
Haskell, the usage jumps out as kind of weird... and anecdotally, I've mostly
heard "isomorphic JavaScript" used kind of ironically, with a wink bordering
on a cringe.

By the way, for the broader point about language mutation, and prescriptivism
vs descriptivism, I think there's a common stance against prescriptivism that
also seems to rule out any negative opinion about language change—to which I
say, hey, negative opinions are part of the whole mess too, even from a
descriptivist standpoint. But this is a derail already; sorry.

------
jamespitts
Ok, here's some helpful criticism (not that all of this is unhelpful):

Overall the presentation of your system is great. However, the documentation
needs work, particularly on how to create a complete mini-MVP. Examples, even
if dinky, help a lot. Many developers will just download an example and start
messing around and see how it feels.

An important note on app structure:

I noticed how the approach you take involves maintaining lot of file
structure, all reflecting the underlying conceptual framework. IMO, even when
generated, complex file structures draw away from our developer productivity.
Think about "flattening" some of that. Think about organizing the system
around the aspects of the implementation, even if it is at the cost of (for
lack of a better word) consistency.

The framework should serve the primary concerns in the mind of the developer:
user, group, post, item, etc. rather than the primary concerns in the mind of
the framework maker :)

Hope this helps, and good luck in Dodge City!

[https://en.wikipedia.org/wiki/Dodge_City_(1939_film)](https://en.wikipedia.org/wiki/Dodge_City_\(1939_film\))

~~~
visarga
Great response. I read the one page presentation and looked at the source
files and it feels like one of the hundreds of skeleton repos for React. Why
is this different, why should we use this one instead of another?

The whole point is to make it easy to work with this full stack framework, so,
that means to have excellent docs and StackOverflow support.

------
andrewingram
From what I can see, this is a boilerplate project with a fancy command line
installer. So if you don't plan on using their exact stack, remember there are
hundreds of other boilerplates you could use that are no more difficult to
install.

------
nullified-vga
I just don't understand the motivation for the cli. Isn't it much easier to
just clone the mern boilerplate repo, rather than npm installing some cli,
then running a command. If there are no options, what's the point? Admittedly,
I might be missing something.

~~~
dbla
I think a cli tool is usually easier because you don't have to rm -rf .git in
order to set up your own repo.

~~~
addandsubtract
You can use the following git command to move everything except for the .git
files to a new location [1]

    
    
        git checkout-index -f -a --prefix=/path/to/folder/
      

[1] [http://www.tekkie.ro/methodology/use-git-checkout-index-
init...](http://www.tekkie.ro/methodology/use-git-checkout-index-initialise-
project-from-boilerplate-repository/)

------
rvdm
I think it's a great idea to try and bring some of RoR's developer happiness
to JS. Universal React + Redux is a great stack but I could see why beginners,
unfamiliar with starter repos, could get overwelmed reading the respective
docs. This project is a good attempt at lowering entry.

My 2 cents, I've been enjoying using websockets and redis with this stack. And
+1 for considering the term Universal in the tagline.

~~~
sotojuan
> I think it's a great idea to try and bring some of RoR's developer happiness
> to JS.

That's been around for a while: [http://ember-cli.com/user-guide/#using-ember-
cli](http://ember-cli.com/user-guide/#using-ember-cli)

~~~
rvdm
Yep! Love Ember. I think it's good that this project it trying to bring some
of the RoR and Ember ideas to the React Redux stack.

------
mintplant
Why MongoDB?

~~~
pedalpete
Mongo is often quick to get people started and simple to work with. No
migrations, or joins, etc. etc.

It's not for every project, but quite nice for prototyping.

~~~
runholm
Not only prototyping. If the final product will have a moderate amount of
users generating a moderate amount of data, there is really no drawbacks with
mongoDB. The real cost is development time.

~~~
pedalpete
Of the mongoDB projects I've been involved with, I've always wanted to do
large complex joins and filters which was just didn't perform as well as
relational databases, and there is no support (as far as I know) for geo-coded
data.

That's why I suggest it's good for prototyping, maybe it will work for some
projects long-term, but I don't think it's the norm as mongoDb would suggest.

However, most prototypes don't end up as successes, so that's where I figure
it's worth the switching cost once a go-nogo decision is made.

------
runholm
So mean.io with React instead of Angular.

------
antihero
I'm not sure I like the trend of tethering an application to a specific
backend, especially regarding databases. I think it would be more interesting
to, if we're looking to be isomorphic, generate a front-end template and an
API _gateway_ . I say this because often when you're not working in tiny
startups, your backend is handled by a different team and is loosely coupled.

------
officialchicken
Are there any isomorphic frameworks or examples that aren't tightly coupled?

I can't understand how to get a development team starting with something like
this to something like a microservices API without a complete/major rewrite or
painful decoupling/transition sprint(s). Or am I missing something here?

~~~
elliotec
I think what you're missing is that this is the opposite of having decoupled
microservices by design. Their point is no configuration, seems like they're
trying out the "monolithic" convention-based architecture with the modularity
of react components, etc.

------
alongtheflow
How do you handle sessions and user auth?

~~~
prank7
This is just a boilerplate, you can add auth on top of it like any other app.
Anyway, soon we will add another example which uses auth and handles sessions.

------
raffomania
What happened to yeoman? Wasn't it supposed to do exactly this and even more?

------
cphoover
does anyone else think the whole LAMP/MEAN... and now MERN is a bit contrived.
Why do we need acronyms for everything? Why can't technologies be used
independently of one another when they are useful. Why do need to cargo-cult
tech trends?!

------
hayksaakian
how does this work with existing tools like webpack? how does this work with
es6?

~~~
prank7
It uses Webpack along with Babel to compile ES6.

------
sebringj
Nelly came up with that already.

------
ilanco
window.__INITIAL_STATE__ immediately made me think about __VIEWSTATE

------
kang
demo page seems broken

~~~
franxoois
Looks like some folks have fun with XSS

------
eximius
You keep using that word. I don't think it means what you think it means.

------
ascorbic
Could I suggest the title is changed to something like "MERN: Build isomorphic
JavaScript apps using React and Redux" which is the page title, rather than
just the domain which tells us nothing.

~~~
dang
Sure.

Edit: I forgot that isomorphic is a trigger word. Took that out.

------
revelation
I don't think _isomorphic_ means what you think it means.

~~~
andybak
[https://en.wikipedia.org/wiki/Linguistic_prescription](https://en.wikipedia.org/wiki/Linguistic_prescription)

vs

[https://en.wikipedia.org/wiki/Linguistic_description](https://en.wikipedia.org/wiki/Linguistic_description)

You might dislike it but it's become common usage in the js community so by
any reasonable non-prescriptive definition of 'means' it 'means' what this
author says.

~~~
fapjacks
Right! One of my favorite instructors (a computational linguist) in one of my
favorite classes (linguistics) always used to say "We as linguists do not
prescribe language, we describe language".

