hosting and Code sharing strategy for multiple react frontends - reactjs

I'm planning to create a bunch of (2 to 3) ReactJS frontends that all primarily interact with the same existing Ruby on Rails API. Each frontend will appear on a different domain, but will use the same graphic design system and UI. Because of this I imagine that they will be sharing a lot of code.
How would you recommend organizing the code for such a project? And also how would you deploy it?
Code sharing
In my research I found the solution of creating a node package that just contains the shared components/code. My concern there is that then the developer (me) would have to be constantly bouncing from the module's repo to the repo for each site.
I also noticed bit but wondering if I want to be so dependent on a proprietary service.
These frontend sites don't really need to be completely isolated from each other in different repositories—even though they are on different domains, you could almost think of them as different sections of the same site, in the sense that they are closely related.
Deployment
If, for example, all this code is kept in the same npm project, then it's conceivable that when deploying, several build scripts could build each frontend and then push each build to a CDN. Would that be a good strategy?

Related

The reason for dockerizing react application

I was learning react and came across such technology as docker and after some done research I just cannot get the benefit it brings for react apps, that is, most of the articles are about dockerizing backend such as Node.js and the one of benefits of docker for backend technologies is that if we want to scale our project in the future then we can take advantage of cloning backend project and put put load balancer in the front. I think it is what we want for our react app. So, pls can you briefly tell me the real benefits we get from dockerizing our reaect app.
The general benefits of container technology will be available to your react app too. Chief among thrm is the extent of isolation a container provides to the config of your application. Apart from the bubble of security this isolation creates, it further simplifies the system administration by making you able to define your Infrastructure as Code.
This ushers in the concept of GitOps to your DevOps which upholds the contemporary practices of hierarchical collaboration and shared responsibility of the up time of your system. Current software development schemes and large scale distributions depend highly on these principles.

Location of front code in backend repository

Not sure if this is the right forum to ask such questions.
We have a project which is using spring+gradle for backend and angular for frontend. These two are separate repositories at the moment. We are trying to merge these two different repositories in single repo for ease of development.
The question I have with this merge is whether we should merge these two projects as two separate independent projects or we should embed Angular code as a subdirectory inside backend project?
In my opinion we should have two different disconnected directories, as this code is no way dependent on each other. but in that case we will have to maintain two different build script etc. Also in some of spring+angular tutorials I saw angular code embedded as a "resource" in spring project, so wondering what is the industry practice in such scenarios
Please help.

Gulp unbuild from salesforce org

I am actually developping an application in a salesforce environment using MavensMate and Sublime Text 3, built with Gulp, in AngularJS from Yeoman.
I managed to connect my built application to salesforce thanks to CodeScience gulp angular tutorial on youtube, and can now develop my application locally, test it, build it, and finally send it to our org.
Right now i'm asking myself a question:
How can another person unbuild the metadata and static resources that I have built with Gulp after retrieving them using MavensMate ?
Isn't there any way to do it just so that we can work on different stuff on the project at the same time ?
That would be truely awesome, I haven't found a way to do it yet but will keep this post updated if I do.
Thanks for any help you might be able to provide.
I am the Director of Engineering at CodeScience. I'm glad you've had success with the Yeoman generator for our local SFDC UI stack. We use it a great deal internally to rapidly build SPAs in Salesforce. If I understand your question correctly, you are asking how to share code from a single or multiple SPAs (single page apps) with another developer. A better solution than sharing code through the static resource would be to use a version control solution like Git and a repository host like GitHub. We all work of our own branches (managed by push/pull requests) and branching in general works very well with our local build stack for rapid prototyping. Let me know if I, our or team can help you any further.
the answer is not to unbuild the static resource, but to distribute the source code to the other developers so they can build a new minified resource.

Should each DNN module live in its own web application project

As we're making our initial move into DNN and setting up projects, I need clarification on the Web Application Project model for creating DNN modules.
Should/can all modules live inside one web application project? Or, should each module be its own WAP?
What would best practices dictate for the project structure in the solution containing DNN modules?
You can do it either way. I've heard people do it both ways.
Do your modules depend on each other at all? If so, you might want to keep them all in the same project so if one gets built, they all do.
If not, I like to keep each module in a separate project just from a separation standpoint. Each module/project will be smaller and easier to manage. Just build the project and it will give you the install file.
It's just a personal preference. I know a lot of people create one solution, then keep a separate project for each module.

Is angular-seed the de-facto empty project to start with?

After having been convinced to learn and use Angular.js, I was going to start a concrete web UI application so as to launch the learning wheel of experience. ( The app is going to be some kind of personal planning, to do list, reminder, pomodoro technique oriented, and so on...)
One of the tutorial videos I have seen, by the author of Angular, is about best practices. And one of the best practices is to start with the angular-seed project.
That is what I was going to do, but after googling a little, there are already at least two other projects that claim to be the good starting point:
angular-enterprise-seed
angular-sprout
I'm beginner, but I like to invest in the long term. Should I worry about using something else than angular-seed ? I feel like it's too early to ask myself this question, but if there are already two other projects, maybe there are some good reasons.
I've found that though many people use various seed projects, the easiest & most consistent starting point for an angular app (or any javascript web app) is Yeoman.
This app is a scaffolding tool that allows you to specify generators which will build the up the kernel of your application, complete with whatever libraries you desire (via bower) and a working grunt build file (most generators come stock with a build task, server task for live editing, and testing task)
Though an app like this is necessarily opinionated, the scaffolding it produces is still very generic.
example:
mkdir my-app
cd my-app
npm install generator-angular
npm install generator-karma
yo angular
They all have different merits so it depends on what you are looking to do. I wrote angular-enterprise-seed and can speak to its relative merits.
It is server-agnostic. This is important since a core tenet of AngularJS, and one of many things that make it attractive, is that it follows the Client MVC paradigm. This means it is entirely decoupled from any and all server technologies. Many existing seeds tie AngularJS to server technologies, such as angular-sprout (NodeJS) or grilled-feta (Google App Engine/Java). In the case of the aforementioned projects, if NodeJS and/or Java environments aren't already on your system, then you will have to go through several hoops just to see the seed come up. This can be alienating to PHP and Python developers, which results in limiting the project's community.
Up and running in seconds. Because it is server-agnostic, it can be run in any container (heck the filesystem for that matter). Suggested method is running "python -m SimpleHTTPServer" from the root directory -- this comes native on Mac and Linux so there are no additional steps.
Live preview. It's cheap to check on status of the project because a live version is always hosted on github. Because it's server agnostic, this is automatically done by copying master to the gh-pages branch from a cron job.
Rich styling. It includes Twitter Bootstrap and custom/buildable LESS out of the box, along with Angular-UI, Angular-NG, fonts, and a myriad of other tools to provide rich styling and responsiveness capabilities.
Widgets. Like Angular-Seed and Angular-Sprout, Angular-Enterprise-Seed exemplifies "best practice" layout, routing, etc. But it also provides a host of pre-built components that can be taken off the shelf and immediately reused. This is a bit difficult to do as it can require the convergence of several technologies. For example, to create the grid example, I combined angular-ui, angular-ng, angular-js, and jquery styling. There are component examples for modals, pagination, alerts, grids, and more.
Angular-seed is great as an academic exercise if you want to learn how the pieces work, but it will leave you longing for a more substantial jump-off point.
I haven't used angular-sprout so I can't speak to its merits. Maybe there is some room to merge angular-sprout and angular-enterprise-seed?
I recognize that this is an older question, but it seems to have a fair number of views, so it makes sense to recommend what has recently become a very popular alternative to both Yeoman and angular-seed: ng-boilerplate. ng-boilerplate differs from angular-seed in that it's designed from the ground up for large production web apps, and therefore is a better solution than angular-seed in my opinion.
To explain the differences between the Yeoman and ng-boilerplate methods of app kickstarting, I'll quote ngbp's creator, Josh D. Miller:
Yeoman is awesome. But the problem I have with the generators for AngularJS is that they package by layer rather than by feature. If we store all controllers in a "controllers" folder and all services in a "services" folder, etc., and all our tests someplace else entirely, it can be quite challenging to reuse our components.
This is also pretty good discussion by Josh on the Yeoman angular-generator issues forum, that goes more in depth regarding the setup of ng-boilerplate vs. yeoman.
Just to be clear, Yeoman is not a generator. Yeoman is a format/system for making generators. There are several generators made with Yeoman that you can use to generate an AngularJS application. People often mistakenly refer to one or another of them as "the" Yeoman generator. But there are many. Confused yet? Yeoman isn't the only generator making system. Brunch is another one.
To answer your question, here is a very comprehensive side-by-side comparison of many AngularJS generators one can use to start making a web application with AngularJS. Currently, it contains over 200 different aspects of these things. One of them is file organization style. So you can easily see which ones organize the files by feature if that's important to you. It is to me.
There are still several of these left to be added. The two mentioned in this thread are new to me. But this comparison should give you a good idea of the options and how they compare. It's editable too, so if any of you are experts in any of these things, feel free to share what you know.
God only knows why people keep making more and more of these things instead of just helping to improve the existing ones. If you have any guesses, I would love to have that mystery solved.
EDIT: to gain access to the doc I ask that you either complete a questionnaire to share your knowledge of something or lobby the experts to do so.
Go here to do a questionnaire:
http://www.dancancro.com/technology-questionnaires/
I like using Yeoman as well. Try these to get a good scaffold:
npm install -g generator-angular # install generator
yo angular # scaffold out a AngularJS project
bower install angular-ui # install a dependency for your project from Bower
grunt test # test your app
grunt server # preview your app
grunt # build the application for deployment

Resources