React/ Flux Frontend and Meteor Backend - javascript

I have been using React and Flux for about two months now and its been great with Flux unidirectional data flow.
I have just heard of Meteor and it's great with its publish-subscribe and DDP. I have a project at hand where I have created some of my React components already and done the application logic using Flux (alt.js).
Now I just want to use Meteor for my backend and use my React components with Meteor front end. Noting that it depends on other NPM packages (I use webpack for module packaging).
So can I use NPM packages in Meteor and still use JavaScript ES6?
There is a Meteor.js React package at Atmospherejs, but it's not the same as the original Facebook React.

I'd suggest these 2 articles:
https://medium.com/#SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75
https://medium.com/#SamCorcos/meteor-webpack-react-router-a-basic-template-with-code-splitting-ac2f95d151e2
Very clear explanation of using webpack ES6 React+meteor stack.
Here couple example projects: https://github.com/thereactivestack/kickstart

Meteor's existing Blaze rendering engine is actually only loosely tied to its publish/subscribe model. In fact, there has been significant interest in the Meteor community in using React as a substitute for Blaze -- so much that there is actually an official integration in the works. (There is also an integration with Angular in progress as well.)
This integration aims to solve several issues to make using React in Meteor as painless as possible, including a ES6/JSX transpiler and the ability to use reactive Meteor data sources in React components.
Although there are some existing packages to use React with Meteor, the official integration by MDG looks great and you can look forward to using it with Meteor 1.2.
Additional links of interest:
Meteor: the missing infrastructure for building great React apps
Preview of official React support

Related

How to make a library compatible with a React Native project

I imported this library https://github.com/THCLab/oca.js-form-core in my React Native project but I get an error when instantiating const ocaJs = new OcaJs({});:
Error: Automatic publicPath is not supported in this browser, js engine: hermes
The library is Node.js compatible (there is an example in the Github repository). However, it is packaged (npm) with webpack and I believe that the React Native project uses this package for import. That's the problem (i think - i'm a beginner in React Native). There are references to the DOM added by webpack. Is there any way to force the use of the Node.js build instead?
Have you tried specifying the publicPath explicitly as discussed in the answers to this question?
In general however, because React Native does not contain all the Core Node JS Modules, many libraries which are compatible with Node.js require polyfills to work in React Native. You can attempt to make a polyfill yourself by following a guide such as this. I have experienced mixed results with such methods, but I am far from an expert. From my experience, trying to create a polyfill can be a time consuming venture to pursue, and I would recommend first exploring whether or not a React Native library exists which can help you accomplish your objective.

Can I use reactJS library in react-native?

Well, this might be a silly question but I want to clarify the reason.
React-Native imports nodeJS libraries, so I think it is possible to use reactJS library as well though reactJS includes pure html components.
Can react native recognize reactJS components including html?
react library actually does not have anything related to Browser DOM HTML. Anything related to it separated into react-dom package. React Native does not and cannot use this library, because you don't have DOM underneath a react native application. However you can use most of the code/functionality you wrote for your mobile app in the browser, if you install necessary transpiling library. This is possible because react native defines some primitive components that can be ported to almost any platform.
If you still want to use just HTML to render inside react native, you may use WebView for it.
Usually libraries built specifically for other platforms will not work with React Native. Examples include react-select which is built for the web and specifically targets react-dom, and rimraf which is built for Node.js and interacts with your computer file system. Other libraries like lodash use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using npm uninstall if it turns out that it does not work in React Native.
-- source: React native official docs

How to use react native on codeanywhere.com

I was wondering how to create a project in codeanywhere.com which supports react native. It isn't included in the initial containers so you somehow have to add it later but I am confused with which container it would be better to select.
I was also wondering if it includes intelligence for JSX.
Node.js Development Stack with Node.js, nvm, npm, Redis and MySQL Server preinstalled.

Use Meteor without its templating library

I'm building an app that uses only Polymer to structure the frontend. As a backend I'd really like to use Meteor with their Mongo realtime database.
I only need the part of Meteor that implements the DDP prototcol and provides the Mongo API to the client. Is it currently possible to remove the rest of the client libraries? I don't need jQuery, Blaze, Tracker and so forth.
I've already tried removing meteor-platform from the project, then adding all the packages meteor-platform consists of. This results into errors like ReferenceError: Meteor is not defined. It seems like this is not supported currently.
What I then used was Asteroid which is really nice. But using it prevents me from using Meteor packages like GroundDB for example.
Reading on the Meteor website gives me the feeling that it should be possible to use only some parts of Meteor, but this doesn't work for me.
What's the best way to tackle this problem?
Edit: I've uploaded a leaderboard example with the failing setup on GitHub. Meteor.isServer is causing the error. If you comment out the server stuff it works.
You're missing two packages:
meteor add meteor underscore
The meteor package is the one that exposes Meteor.isServer.

AngularJS: Dependency Management

We are currently planning a website which exists out of different AngularJS apps that will make use of common services. Services will be implemented in seperate files; to minimize the filesize of the apps we want to include/concatenate only those service-files that are used in the corresponding app - so we are looking for the best practise in dependency management.
is there something like requireJS in angular or what would you suggest to handle the includes?
thanks in advance .)
I suggest to use the same organization as ng-boilerplate:
https://github.com/joshdmiller/ng-boilerplate
I use an organization close to ng-boilerplat for one project and it allowed us to be modular in our dependency management.
For me, the only build/deployment system that works like a charm for most web apps that have extremely js computation is yeoman.
This quote should describe what it is/does:
Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.
So basically, it is a npm that installs all the boilerplate files, dependencies and configures your whole app with the help of generators. It uses bower and gruntalso takes care of the hard part of configuring grunt that is in charge of building/deploying your app.
I highly recommend yeoman as a modern and efficient workflow.
I personally haven't looked at the ng-boilerplate as #Julio mentioned above, but you could easily manage to configure and use RequireJS with angular of you want to. I've done it and it works like a charm.

Categories