Comments (4)
How is progress on this? What are your main thoughts?
from server-components.
Some progress! https://github.com/pimterry/leaflet-map-server-component is a fun isomorphic example, rendering on both sides.
It does that by extending server-components just there though, as a testing ground. I'm looking at porting various bits of this back into the core library in time, but not yet. Notable points:
- I added an
onServer
property, so you can checkcomponents.onServer
to switch logic for server and client (which is sadly required in a couple of places). - You need a server-components-for-web wrapper, to do the tiny bits of mapping to bring the APIs together (now maybe less necessary with Custom Elements v1 coming out), and to provide stubs for server-components-static (so that you can make sure you generate the same URLs for images and other resources on the client and server side).
- Your browser-based dependencies might well not work out of the box. I found some nice tricks to wrap them so you can inject a DOM on demand (rather than them expecting one to exist globally), there's a blog post explaining it here: https://medium.com/@pimterry/building-a-server-rendered-map-component-part-2-using-client-side-libraries-6f1bb751f31c#.hkr80i601. This is a general server-side rendering problem that isn't specific to server-components or isometric rendering, but once you're building components complicated enough to need this, you're going to hit these problems.
- You need to think about how module systems are going to work. This is a toy example, so I'm doing CommonJS server side and just browser global examples client-side, but if you want to use the same thing on both sides then life is going to get more complicated.
The resulting component code looks like this: https://github.com/pimterry/leaflet-map-server-component/blob/master/src/leaflet-map.js. It's mostly pretty good: there's a couple of lines that differ server vs client (search for .onServer), but otherwise the core logic all works nicely.
Hope that's useful! I'm still playing with these ideas and steadily iterating, and I'll be updating this to bring them to life a little more later on. Any feedback on what works for you though (or what doesn't) would be super helpful.
from server-components.
Ahh, so you're running the full library server-side, pre-rendering what would have happened on an initial page load, and then sending that and everything else to the client. Very interesting; I had a similar idea, but this is one step further and a better fulfillment of what I had in mind :)
Do you have a vision for dependency + asset management? I can see server-components replacing tools like browserify/webpack since it could inspect the resulting HTML and potentially calculate the dependencies of all custom elements on the page.
from server-components.
On the other hand, in light of HTTP/2 push, maybe you don't have to worry about script bundling after all, and instead put scripts closest to their component tags?
Edit: https://blog.cloudflare.com/accelerating-node-js-applications-with-http-2-server-push/
from server-components.
Related Issues (20)
- Allow rendering of fragments
- Support type extension elements HOT 1
- Document the exact differences with real web components HOT 2
- Come up with easy standard patterns for component registration (components.use(require('my-component')))
- Make it easy to integrate server components and templating libraries like Mustache for data HOT 1
- Make it easy to integrate with Express
- Make example code from README runnable, with TonicDev or similar HOT 2
- Create a standalone example express project
- Put together an ascii cinema setup demo
- Add MutationObserver to Domino
- Move to wrapping a standard custom elements polyfill HOT 1
- Move website onto DNS.js.org
- Build a TODO MVC style demo app
- Event Handling on Server-Components doesnt work HOT 3
- Example with ES6 imports HOT 2
- Convert to Custom Elements spec V1 HOT 3
- Is this project abandoned? HOT 2
- template support HOT 1
- data binding, ex: table
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from server-components.