Comments (11)
I would love this
from rendr.
Yeah, I imagine we'd have to modify our approach to requiring modules. No small task to figure this one out!
from rendr.
I was able to get Browserify working with a little bit of effort. I've done it manually using API for now, but a Grunt task would probably be better.
https://gist.github.com/jlogsdon/5779710
It's not the prettiest, but it packages everything up and if I save the output to public/mergedAssets.js
the app works fine. I had to make one change to rendr: globals.rendr.entryPath
is no longer used when including app stuff as the modules are all available at app/name_of/module
instead of a full path. This didn't appear to break anything server-side and browsing around works fine. I simply went through and replaced all entries of rendr.entryPath + "/
with "
(one case was a single-quote).
edit: I've added a diff of the changes I made to rendr.
edit2: I just realized why this worked on the server-side: I forgot to restart the webserver. So the entry names will need some work still.
edit3: Okay, updated the script again so it works with rendr unmodified. App files will be available under /app
with it, so an empty entryPath doesn't break things. Had to update __layout.hbs
to call it correctly, though.
from rendr.
I didn't try yet, but it's in my todo list. I'm interested too.
@jlogsdon
You coud use my grunt task for browserify : https://github.com/amiorin/grunt-watchify
from rendr.
Mine method is definitely a "Proof of Concept" as it doesn't sue Browserify "correctly" at all. Generally speaking you should be able to add a single entry point and let it go, but due to how a lot of the requires are handled I ended up creating "manual" packages for everything that can be required.
They got around this with the stitch implementation by creating a custom grunt task that did aliasing, but from what I can tell there's no simple way to do a similar aliasing method with Browserify.
from rendr.
Thanks @jlogsdon! This is a great start. I'd love to figure out how to get it working with using Browserify "correctly" -- with a single entry point. However, I expect this is still more flexible than Stitch. Mainly, I want to avoid having the app hardcode all of the NPM dependencies. At the very least, I would want Rendr to own that list, so the app developer can upgrade to a newer version of Rendr and they don't have to change to build script.
Before switching over to Browserify, I'd like to see an example of how to integrate with rendr-handlebars
, as demonstrated in: #56
from rendr.
Not to slow momentum, but I'm not convinced adding Browsersify support is an improvement. Are we talking about supporting both Stitch and Browserify, or switching entirely to Browserify?
Since each tool adds it's own set of constraints for including and excluding modules, supporting both is significantly more complicated.
If we're talking about switching entirely to browserify, the dynamic requires done here and elsewhere in that same file would need extra build magic. Browserify doesn't understand them out of the box.
We'd also have to take extra care to keep server modules out of the build. A mistyped require could explode the bundle size without warning. Projects using the framework would inherit the same challenge.
Other potential solutions to polluting project build files:
Maybe there's some combination of module-deps and browser-pack that will do just enough.
Maybe we could expand grunt-rend-stich
to parse a per-package manifest of files to be sent to the client. rendr-stitch-manifest.json
or somesuch.
Imagine a <my-project>/Gruntfile.js
like
rendr_stitch: {
compile: {
options: {
dependencies: [
'assets/vendor/**/*.js'
],
npmDependencies: {
rendr: true, // flag to grunt-rendr-stitch to look for a rendr-stitch-manifest
rendr-handlebars: true
}
},
files: [{
dest: 'public/mergedAssets.js',
src: [
'app/**/*.js'
]
}]
}
and a rendr/rendr-stitch-manifest.json
{
npmDependencies: [
underscore: 'underscore.js',
backbone: 'backbone.js',
handlebars: '../rendr-handlebars/node_modules/handlebars/dist/handlebars.runtime.js',
async: 'lib/async.js'
],
aliases: [
{from: './client', to: 'rendr/client'},
{from: './shared', to: 'rendr/shared'}
],
files: [
'client/**/*.',
'shared/**/*.js'
]
}
I don't have a strong opinion on the right direction, just want to make sure we consider options before committing to a direction. Browserify, by default, assumes the modules it's bundling are going to the client in their entirety. Rendr modules, part client, part server, part shared seem like new territory.
from rendr.
Just to follow up on this, I think you're on the right path @hurrymaplelad. I do like the idea that each module can expose a manifest listing its packaging requirements. If it weren't very verbose, it could live directly in package.json
, but perhaps it's better to live separately. I'd also be neat to find a format that is independent of Rendr, and more general.
from rendr.
I have a solution working for Browserify with the example 00 using the code pulled from npm install
. There is a bug when I apply the update to the Rendr version in master, but I plan to push this into my repo later today. It's a clean implementation with only minor modifications to the Rendr source.
from rendr.
I'm ready for people to review Rendr with Browserify. I updated both rendr
and rendr-handlebars
. Currently, I only implemented the update for example 00_simple.
This is not yet ready for a pull request as the npm package / tag / version for both
rendr
andrendr-handlebars
will need to be updated at the same time this is merged intomaster
. The reason is thatrendr
andrendr-handlebars
are both dependencies in 00_simple package.js. Further,rendr-handlebars
is a dependency listed inrendr
's package.js.
Steps to Test
git clone https://github.com/akbarahmed/rendr.git
cd rendr/examples/00_simple && npm install
cd node_modules && rm -r rendr rendr-handlebars
git clone https://github.com/akbarahmed/rendr.git
cd rendr && npm install && cd ..
git clone https://github.com/akbarahmed/rendr-handlebars.git
cd rendr-handlebars && npm install && cd ..
cd rendr/node_modules && rm -r rendr-handlebars
git clone https://github.com/akbarahmed/rendr-handlebars.git
cd rendr-handlebars && npm install && cd ..
cd ../../..
grunt server
Random note: If anyone knows how to debug Browserify I'm all ears. Getting this working took 3 days, and in the end it was trival...although debugging was a PITA.
from rendr.
Fixed by #192.
from rendr.
Related Issues (20)
- Rendr, Grunt and Browserify HOT 9
- modelUtils - hardcoded typePath HOT 2
- Lazy view with fetch_params HOT 2
- jquery selector not working on events HOT 3
- Jquery .val() undefined HOT 2
- Improvement in release process HOT 20
- On client-load, _block subviews don't get their passed-in model. HOT 2
- how to pass model to subview HOT 4
- LocalStorage is not defined in the controller HOT 1
- Using gulp with rendr
- Render App.router.currentView is undefined HOT 1
- Rendr + jspm HOT 2
- Is this still used in production of airbnb or anywhere? HOT 2
- Unnecessary server sessions [fix] HOT 2
- setting writeToCache: false still writes models to cache HOT 1
- Debugging an Example app HOT 1
- Store some data which is loaded first time via API?
- how to run derbyjs without mongo? HOT 2
- 1 vulnerability found by nsp
- Handling model Error if one model fail to give data in controller HOT 2
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 rendr.