I am working on a website with React.js and asp.net mvc 4, I am planning to use Flux as my front-end architecture, but I met some problems and was very confused about the use of Flux:
In the beginning,I thought Flux would be a perfect front-end architecture in my website,but after I read a lot of articles about Flux, I find that they are nearly all with NodeJs,even the demos from facebook team,that means they all do the rendering stuffs of React.js/Flux code in server side,right? but How can I use Flux in the client side ,I mean in the user's browser?
I am very confused,am I wrong if I treat react.js/flux as a client side solution?If I am not wrong, but why they all use them with NodeJs and ES6(like facebook Dispatcher.js), That's ok in server side,but what about client side ? most of user broswers don't support ES6. I tried using Babel to convert Dispatcher.js from ES6 to ES5,but the es5 version had some errors and didn't work.
And I also found some implements of Flux that claim to support client side,like fluxxor,but I don't have a chance to try it before I write this post,because I am too confused.
I hope someone can help me to figure out these problems.
ps. Sorry for my english,if you don't understand my words,pls let me know , I will explain it.
I think you want :
$ bower install flux
Then you could do something like this (if using require.js):
require(
['bower_components/flux/dist/Flux'],
function(
Flux )
{
var dispatcher = new Flux.Dispatcher();
dispatcher.register(function(payload) {
if (payload.actionType='test') {
console.log('i got a ', payload);
}
});
dispatcher.dispatch({
actionType: 'test',
otherData: { foo: 'bar' }
});
});
(This answer uses : https://bower.io/, https://libraries.io/bower/flux, http://requirejs.org/)
React is a client side library. You can serve a React App with virtual any backend language. The reason a lot of examples are with node is because it is easy and fast to set up.
You should try this tutorial:
https://facebook.github.io/react/docs/getting-started.html
It is pretty straight forward and doesn't require node.
Also maybe you should try starting to serve the React app statically at the beginning to better understand React itself.
ES6 works in Browsers thanks to Babel. If you believe you have any trouble with Babel, you might want to first play around with it's REPL to get a feeling for it: https://babeljs.io/repl/
The idea is that the code can run on the client and server (universal js, used to be called isomorphic javascript (though it goes a little further then that with serverside rendering etc..),
There are many flux implementations reflux is the most promising at this point , im using martyjs (but they stopped the development, it will be taken over by alt) but even for the flux architecture, u just get the dispatcher / event emitter and some ideas :D,
Shorty said u can install the npm packages (flux, react , babel) etc, but u need something like http://browserify.org/(with reactify) or Webpack, to run them in the browser. U don't need to run them on a node js "after its bundled", webpack/browserify will bundle the code so it can used within the browser independently
https://github.com/christianalfoni/flux-react-boilerplate/ <-- ther are some boilerplate, that provide some nice guide on how to bundle the code.
Related
I'm writing a nuxt module following this guide.
Now I would like my module to add a proxy rule to the host application. Its a lot of guesswork and nothing has done the trick so far. I tried
nuxt.options.proxy.options.push(
{
target: 'https://target-url.com',
changeOrigin: true,
pathFilter: ['path/to/match']
}
)
}
but my IDE complains that proxy is not a known property of NuxtOptions. I did shorten the above code for the sake of this post. In my code I also made sure the respective objects exist before assigning something to them.
next best guess (based on the example for adding a css library) was to do the same thing, but on the runtimeConfig like so:
nuxt.options.runtimeConfig.proxy.options.push(...)
no complaints by the IDE anymore (duh, the runtimeConfig object is of type any) but no sign of the proxy actually working.
I am writing tests for a React based web tool. So I want to clear all local storage such as login information etc. before each test. I have majorly worked in Cypress, where this was just a simple command.
cy.clearLocalStorage();
I am now using WebdriverIO and this is the approach that I was trying out (in the test file).
afterEach(() => {
browser.executeScript('window.localStorage().clear()');
});
However, this doesn't seem to be working. Moreover, I would prefer a global solution, something that I don't have to write in each test. Thanks in advance for the help.
From the WebdriverIO Docs:
// remove the storage item for the given key
client.localStorage('DELETE', 'someKey');
// clear the storage
client.localStorage('DELETE');
You can clear localStorage by running this preset function.
You were almost right in your assumption. I'd suggest using official docs to eliminate minor errors.
Instead of executeScript use https://webdriver.io/docs/api/browser/execute.html
localStorage is not a function, see https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
So it should be
afterEach(() => {
browser.execute('window.localStorage.clear()');
});
P.S.
Assuming you are using WebdriverIO 5 or above.
So, after a lot of time, we realized the problem.
The cy.clearLocalStorage() cleans only the local storage under the baseUrl definition.
If you would like to open multiple pages, you have to explicit define the clearing in the cy.visit() call, like that:
cy.visit(`subdomain.another.domain`, {
onBeforeLoad(win) {
win.localStorage.clear();
},
});
In this case, the local storage for the exact domain, will be deleted.
I hope, this workaround helps.
I am trying to try running meteor together with react and react-three library, that wraps three.js for react. As there are no atmosphere package for this, I am looking into either wrapping it myself or any other method how to use it.
1) How to wrap react-three library into meteor package?
I have tried downloading react-three repo, running npm run build and then using resulting react-three.js with package code written like this:
Package.describe({
summary: "react-three wrapped",
version: "0.8.0",
name: "myname:react-three",
});
Npm.depends({
"react-three": "0.8.0"
});
Package.on_use(function(api) {
api.versionsFrom("0.9.0");
api.use('limemakers:three#=0.73.0',['client','server']);
api.add_files([
"lib/react-three.js"
]);
api.export("THREE");
api.export("ReactTHREE");
});
but this does not seem to do the deal, no ReactTHREE is exported. Might be because of the way react-three build process works. Could you point me into the direction on how to build and wrap it properly?
2) Maybe it is possible to use it directly?
I tried meteorhacks:npm, but it seems that it is server side only. Anything else that could work?
Meteor 1.3-beta was just released and it has support for js modules, although I haven't had the opportunity to test it.
This article has good documentation.
https://github.com/meteor/meteor/blob/release-1.3/packages/modules/README.md
I'm attempting to create a collaborative jukebox as a little project to learn Meteor, so apologies for this very high-level noob question.
I need to be able to call the soundcloud SC.stream (see https://developers.soundcloud.com/docs/api/sdks#streaming) function on multiple clients. The template all clients are looking at is binded to a object that looks something like:
room: {
title: "roomname"
currentlyPlaying: {
trackName: "track name"
trackStreamURL: "http://soundcloud/12345"
}
}
I can't seem figure out a way so that when a client, say the admin, sets a new currentlyPlaying to trigger all client to run SC.stream and start the new song.
I'm just not sure what the right meteor features are to use in this scenario, so i'm not looking for a code solution exactly, just a point in the right direction.
Thanks in advance.
Save the currently playing url in a document in a collection. Then use cursor.observe() or cursor.observeChanges() on the client to watch the document with the url in it. Do this inside a Tracker.autorun in block.
When the url changes, stop playing the previous tune and start playing the new one.
See here for documentation on cursor.observe().
For the life of me I can't make durandaljs work with Areas. I'm developing an application with multiple mini SPAs, but I'm not sure how to set up durandaljs to work with it. I wasn't able to find anything online that can drive me in the right direction. The only similar question I found was this one, which is very vague.
My goal is to separate each SPA within it's own folder like so:
App
--areas
----area1
------viewmodels
------views
----area2
------viewmodels
------views
The router doesn't seem to have the concept of areas and no matter how I map the routes I get 404s when I call router.activate('page1'); after mapping with router.mapRoute('page1'); durandal is trying to get /App/viewmodels/page1.js.
Changing it to:
router.mapRoute('areas/area1/viewmodels/page1');
router.activate('areas/area1/viewmodels/page1');
results in another 404 fetching App/viewmodels/areas/area1/viewmodels/page1.js
I've also tried many other combinations which I no longer remember and can't seem to get it to work.
Can someone please post a working example of how to setup durandaljs with the router plugin and multiple mini SPAs (areas)? A link to an article document would also suffice.
You can use viewLocator.useConvention - maybe something like this:
viewLocator.useConvention(
"areas/area1/viewmodels",
"areas/area1/views",
"areas/area1/templates"
);
One good thing to realize is that useConvention() works in conjunction with any existing require.config paths setting. In other words, if you set the require.config so that "viewModels" and "views" are mapped to the right folders, then all is well.
For example, the code snippet above is functionally equivalent to:
window.require.config({
paths: {
"viewModels": "areas/area1/viewmodels",
"views": "areas/area1/views",
"templates": "areas/area1/templates"
}
viewLocator.useConvention("viewmodels", "views", "templates");
I a similar structure implemented in my application. I think that you have to put this piece of code, to do the viewLocator works properly.
viewLocator.useConvention(); //You can do that in you main.js
You can see more information here: http://durandaljs.com/documentation/View-Locator/
Also I recommed you to look the code of viewLocator.js, especially, the code of useConventionMethod.
Other possibility is to override the method convertModuleIdToViewId, to make it works as you want. But I think that using useConvention methos is enought.