Convopage
See the entire conversation
PSA: You can use JSX in @vuejs . And css modules, and CSS in JS, and everything you do in #ReactJS, oh and #InfernoJS, oh and Preact.
177 replies and sub-replies as of Aug 21 2017
Oh and yes, you don't even need HTML-like single file component. Oh and yes it compiles down to render functions.
Oh and yes, it's because Single File Components are an abstraction on these models just like JSX is.
I spent a few weeks building a Preact compiler.
IN: Polymer, Vue & Preact single-file components
OUT: highly optimized Preact components
Which is why @_developit, myself, and others believe anyone should be able to in their respective FW.
TheLarkInn/unity-component-specification
unity-component-specification - This is a WIP draft of the Unity (Single File Web Component) Specification
github.com
So @EisenbergEffect, @yoshuawuyts, @WebReflection, @andrestaltz, @skate_js let's work together to create a unity layer for interop. 🙇
There's boundless potential for the communities to share and collaborate on a layer that really puts interop in a groundbreaking direction.
Even if it's not identical to what I've been working on.
This _has the potential_ to drive standards based on how Developers write code. When we build a platform out of that we #UseOurPlatform
I think a key pillar of success here should be if it can make itself redundant. s/our/the
I'm going to be that guy, but standards mean a lot, especially of backed by user adoption. Enter pillar 2.
Well that's why standards come second 🤗
I would say they both need to be fulfilled to be successful otherwise it's just another HN thread.
Correct. It's win win, even if not standards, it's a beautiful interop layer so people can share components that compile to _framework_
Which means it would be agnostic to browser support.
Of note: can be a standard without leading to a browser implementation to. JSX and CJS are examples of this.
I'm with Jason. Standards are just conventions, no matter where they come from, adoption is more critical than fancy logos in the specs.
I'm still rooting for adoption by browsers where applicable, just there are some things that don't need that treatment.
Exactly, browsers adoption is still adoption 🙌💖
I don't disagree, but I think it's worth considering existing specs when designing this one as opposed to designing similar but disparate...
Ideas. What is being proposed looks very similar to a composition of existing specs but seems slightly incompatible.
If they're closely considered, browser adoption is more likely. That's all I'm saying.
Worth saying this is super initial, hopefully it will trigger more discussions which I would already consider a big win
Gotta be honest about adoption; I'm still glad no browser ever shipped with jQuery included. It would've killed many modern better solutions
I think I meant something different from Jason. With browser adoption I meant vendors participating in a possible standard, not native APIs.
My apologize for the confusion and not clear explanation of what I was thinking.
For sure. Lol or moo tools or etc
The underpinnings of jQuery influenced platform solutions. I see this helping there but have to be careful not to write off existing APIs.
Totally agree with this. And this is what my "browsers adoption" means to me, pushing inner discussions.
This is precisely why I think it should augment existing standards. Less fragmentation.
Why does fragmentation exist:
* Drafted around something people don't used
* Drafted around something people can't use
*
Doesn't mean existing standards can't be improved either. This discussion is what should have happened prior to WC V1 churn.
Baha I wasn't around back then ;)
And I especially wasn't working on a browser team.
Sounds great. Is in all in that repo you linked? Also ping @treshugart
Yes I shared with him yesterday!!!🙇
Much more to iterate on but at this point having everyone involved is going to help mold this into something interoperable
I guess I'm confused. Is that not html.spec.whatwg.org/multipage/cust… ?
Noo. It's far less JavaScript.
But it could work quite well with CE and WC. But purely alongside it.
This will be sooooo good.
Maybe document the wins over actual Web Components?
everything ok buddy?
Yes/No. Yes I'm mentally all there, no I want to ensure people know how FWs work and why.
you can, but having to pass different types of props via different syntax is a big no no
Well think of that as a FW specific feat, it could be ignored and used in React today. github.com/SmallComfort/r… 🤗🤗🤗🤗🤗🤗🤗🤗🎠🏇
SmallComfort/react-vue
react-vue - Run Vue in React and React Native
github.com
I was talking about this one github.com/vuejs/babel-pl…
on, nativeOn ...
vuejs/babel-plugin-transform-vue-jsx
babel-plugin-transform-vue-jsx - babel plugin for vue 2.0 jsx
github.com
That would also separate Preact as well FWIW. But benefit: no need for a Fibre etc. But yes that's I'd say one tradeoff!
Everything I do in React?
Oops _almost everything_ sorry Ken.
But educate the class please.
React.createClass
Ehhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
Keep em coming though. Most argue no default class system is a feature bruh. #mixins
backbone.view.extend({
$.fn.extend
dojo.extend(
Soak it in. And fall in ❤️
Sebbbbbbb 😍😍😍
Unsubscribe pls
Bruh you don't even need that extend but jump on aboard cause I know you love it.
So why in the world would i write that instead of React
You wouldn't, that's for those who want their classes though. The point is flexibility. Abstraction. Use it how it works for you.
Just responding to SamTrollBot9001
plz I upgraded to SamBot9011-beta last week
Damnit no wonder mute isn't working
Why would you write Vue instead of React
Why make a steak when you can go to Burger King?
Burger King has a patents clause
When I don't need an extra event system for abstracting targets beyond web. There's a few.
When I want a syntactic sugar for writing UI a bit faster, but also retaining the flex to compose and be functional.
When I want a router, state mgmt, and webpack tooling maintained for the people by the FW author itself.
Which in turn _might_ mean they couple and integrate a bit nicer.
Lovin this thrd. Always wondered Vue vs react, but focus on react for profession/cmnity. Much prefer Vue syntax. All jobs still Angular tho😞
Why not try @vuejs for the first time? Just run:
yarn global add vue-cli && vue init pwa omg-hooked && cd ./omg-hooked && yarn && yarn dev
The React community very much favours functional JS, Vue feels less functional imo if that makes sense?
You can do both!! :-D No reason why you can't! Coming down the function trainnnnnnn!!!!!!!
Oh of course, I just mention the general community preferences.
For sure, that's why I've been wanting to stress this to people that you get both OOB!
I think that newer devs probably struggle more with functional JS than with React itself. Vue holds your hand better in this regard imo.
Is that always a good thing?
That depends on how that project is driven. Is it created for business incentives or to solve user problems. Likely will answer this.
React doesnt do it for you in terms of functional composition?
Never said that. There are times when I don't need it. There are.times I def need it.
Not trolling genuinely curious. Also, worked with browser event systems much?
Not as much as you im guessing. 😅
So any other advantages?
Well there are compile time benefits to using a SFC as it hoists static content cc @_developit
But a trade-off to not using jsx.
But beyond that unless I think even more about it (which I'd be lying if I said I haven't for a while), it just becomes opinion + less fact
It is easier to statically analyze templates because their variability is constrained and serialised. Possible in JSX but very complex.
Whats the root of the complexity
arbitrary invocation of JS at any point via {..}
You can do that in vue too tho, right?
In JSX. Not sure about templates - if they support mutation it would be at runtime and adhere to a stricter API.
The issue with arbitrary JS is that there is no way to optimize for it AOT. Function can return anything 😐
Templates appear to support expressions, but they are "sandboxed" so maybe thats what allows static analysis to happen still
Exactly. That is a much better way of putting it. You give up some control but gain build time insight.
A good analogy would be Webpack Vs RequireJS.
Bro, do you even Glimmer? github.com/glimmerjs/glim…
Well we certainly know about it
Yes w/ JSX, if you want the benefit of optimization then there's a strong argument for the <template>. Trade-offs ofc for your preference
I'm stealing this.
Stealing what for what though lmao.
All of github.com/tkh44/emotion is built on this premise. We are able to do some neat things because you can't touch tagged tmpl at runtime
oh shit thats a good idea ;-) static analysis ftw
It works with vue btw 😏
Events are quite consistent in all but the oldest browsers.
Wait do you _have_ to declare each prop the component receives, or is that optional, for validation, like React's PropTypes?
Please read the actual Vue docs and not just the screenshot before diving on it.
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
Jesus man was just curious. Never mind
I say this because I've never used the TS version and it's different. So it's best to read from the src. IANAVueExpert
Regardless of TS integration - I just assumed/hoped you could leave props declaration out, and just use w/e props were passed in, like React
You know, in fairness, if were talking web, fine. But I hate html. And I use react off the web more than on it. Because its abstracted well.
Abstracted in a way that its a platform/target agnostic component model, which is kind of my shit.
Have I mentioned that I fucking hate HTML.
You waited 4 minutes between your bashing of HTML or the DOM. Please never have me worry like that again.
Balance has been restored to the universe.
Do I have to pull out the non single file format that compiles to Weex? Just to appease your anti HTML?
Dont make me check all of these check boxes Kenneth.
I have a little Vue pen laying around where I used a render function to abstract SVG to a whole other syntax (works the same for HTML)
To what?
To whatever you want. In my case, playing around with more human-readable markup for the purposes of teaching but could do it however u want
hotdogs or legs?
🌭🌭 or 🍗🍗
Lol....That looked cracked me up 😂
Know of any tuts showing or teaching this?
has some excellent ones!
You got dem links?! :)
I can't remember off hand but you can search Vue jsx and one of the top links is from them. (And it's a great one!)
Awesome. Thank you sir.
Awesome thanks man
JSX/VDOM****
Don't confuse the framework with the abstractions themself.
But can you render to Native mobile code ? Or anything outside DOM/HTML 😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛😛
Of course you can. There are already multiple teams doing it. Weex from, Alibaba, and @NativeScript
That's the beauty. Everything you see there is just an abstract representation of how we expect it to appear. So it's HTML/view like
So the setup is made that the rendering layer could be swap ?
I know that the code so far could be used everywhere but I am unaware of the bottom line architecture
Well that's the exact point!!!!! Actually this is my favorite point. It's just abstract enough to use anywhere. Then curry in platform
No there yet 😛😛😛😛😛😛😛😛😛 actually I don't even know 😂is it worth to check btw?
hyperHTML as well as Vue & Angular works with NativeScript, right?
Correct I believe so. :-D
Why is this a PSA?
There have been many many threads in muh feeds of people stating inaccuracies about what Vue is and it's differences from other FWs
Like what?
Vue is more like angular and farther from react. Or not knowing what Vue compiles down to, or rather the differences between both overall
I never understood why react and vue are compared so much.
Probably as they are incredibly close in growing popularity?
Even then that's a speculation.
I think it's strictly off popularity.
The render functions, the non-necessity for it's html-like single file components, the list goes on.
I'd rather just use react if I'm going to be using jsx tbh.
Sure! Nothing wrong with that! Just making sure people are aware with how Vue works, and what it is capable of. :-D
Yeah that's true :)
I'm quite surprised people thought they couldn't, all JSX is an AST from XML to function calls. Rock on Vue tho!
Wow my response was loaded with acronyms lol
Oh thats super awesome also!!!!!!
Anything is possible (that's nice!), but are there any drawbacks when (not) using JSX? Or just preference. So much noise these days.
Does it do native? 😂
I've seen this font like thousands times but always forget its name. Please!
oh god, cursive, why
More and more the lines between all these frameworks/libraries are blurring.