I'm developing a front end with reactjs for a fairly large project which has two main interfaces.front-end of the main site and front-end of the admin.
Should i develop these as two different projects or one project in reactjs. if i structure these as two separate projects i'm well aware that it means i will have to do lot of repeating code on both projects. So i presume i should consider it as one project as below.
client (Project Folder)
app/main
app/admin
If i'm developing this as one project how do different front-ends route to different sub-domains if it lies in one project folder.
example.com - main front-end
admin.example.com - admin front-end
It is okay to have a shared codebase for admin and public sites. But you will need to generate different js/css bundles for them. So your public index.html includes something like public.js and public.css. And the admin uses admin.js and admin.css. The public files contain all the shared functionality and the stuff which is used on the public site only. Same thing for admin.
Making that separation can significantly reduce the file sizes, as typically admin apps include some charts, rich text editors, css frameworks and tons of other stuff which may affect your public site loading speed.
To implement separate bundles with webpack, which you probably use, you need to create a few independent entry points.
The docs — https://webpack.github.io/docs/multiple-entry-points.html
Also, you will need to use different react-router setups and redux stores (if you use those). But the presentational components and utilities can be shared.
Related
We are building an Aurelia application. We have common login page and home page for our customers. But each customer will have their special customer page, which is very specif to them. These cusomer specific pages should only be visible to the customer and not visible to others. I need to find a proper way to to create a sub folder in my project for each customer to have their specific resources. Even when we bundle the applicaiton for a specific customer, we should export only their own resources.
It sounds like you are using dynamic routing. There have been a few folks asking this question publicly. One example is here https://discourse.aurelia.io/t/dynamicaly-load-routes/1906
Note that Aurelia also works with remote view, as an example is here https://codesandbox.io/s/8ljmrq3vql
One common things about ultra dynamic scenarios is you need a proper dynamic script loader (requirejs, systemjs, fuseboxjs), not bundler (webpack).
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
So I've been looking around to see what the most popular / standard folder structure is for Angular 2 apps and it doesn't seem like there is one. Is there anyone who is using in Angular 2 in production who can shed some light?
Here are some approaches I found:
1) Split by feature, with 1) a shared folder 2) a folder for each feature that contains all the files (whether component, or service, or whatever) directly inside that folder
https://angular.io/docs/ts/latest/guide/style-guide.html#!#application-structure
2) Angular 1 style (no nesting or separation by features, just components, pipes, services, models)
For #1 would it feels weird not having a subfolder for components, subfolder for services, etc. Where would I put a service being used across all the routes?
BTW I'm using the Angular CLI generator: https://github.com/angular/angular-cli
The style guide provides lots of does and don'ts about how to structure your app https://angular.io/styleguide
It says to maintain a flat hierarchy with a folder per feature and related files (component, template, style, ...) in the same folder.
I think that it depends of how you like to organise your app. If the app is small I like to separate them by type (components, services, views, etc) but if it's a big and complex application then I use to divide it by functionalities because it's easier to find the folder you are looking for.
Another alternative would be a combination of both, divide the app by type (components, services, etc) and then inside each type divide it by similarity (all the components related to users inside the folder components/users/usercomponent1, usercomponent2, etc)
I have a internet application mvc4 with areas, for my organization each area represent a SPA and through "Manage NuGet Package" I installed "Durandal 1.2.0", "Durandal Transitions 1.2.0" and "Durandal Router 1.2.0". I organized the folders and quit the "views" and "viewmodels" from folder "App" of Durandal and put the new views in folder "VIews" of mvc4 area for example:
Areas-->NewArea-->Views-->ControllerFolder-->views-->shell.html
Then I put the '"viewmodels" in "Script" folder for example:
Scripts-->NewArea-->ControllerFolder-->viewmodels-->shell.js
Scripts-->NewArea-->ControllerFolder-->main.js
Then I changed paths for JS of durandal, for example in main.js:
define(['../../../App/durandal/app',
'../../../App/durandal/viewLocator',
'../../../App/durandal/system',
'../../../App/durandal/plugins/router',
'../../../App/services/logger'],
And I changed main.js in the next line:
viewLocator.useConvention('viewmodels', '../Areas/NewArea/Views/ControllerFolder/views');
But that configuration of folders fails because the next line calls various times the module "viewLocator" in its definition and rewrite the configuration of "useConvention" with default value:
app.setRoot('viewmodels/shell', 'entrance');
That behavior only happen when the folders "views" and "viewmodels" don't stay under "App" folder of "Durandal".
Please help me, how to have various SPAs in the same project?
You might want to consider your deployment strategy. For example, if you need to optimize this app, both SPAs will end up in the same file. However, instead of having them both under the app folder, you can make separate folders, and give each SPA it's own main.js file.
In more advanced scenarios, you may create a "bootstrapper" app that loads one or another of the SPAs. The bootstrapper would contain code that is common to both SPAs. But each SPA (and the bootstrapper) can be optimized independently.
There are many options. Mainly, consider your final deployment strategy and that will help guide you here.
Also, the issue you have above is probably related to the fact that the standard conventions may not work in your setup, and you would need to override some functions with your own mapping.
I ran into the exact same problem this morning. I originally formatted the project to be:
app/spa1/viewmodels
app/spa1/views
app/spa2/viewmodels
app/spa2/views
Using this structure I hit the exact same wall you did. After reading your post, I restructured the project to be:
app/viewmodels/spa1
app/viewmodels/spa2
app/views/spa1
app/views/spa2
Using this structure, navigation works fine. I set up three SPAS and was able to navigate all three. The other benefit of this structure is that you are now following the standard convention so you don't have to configure the view locator. Just make sure the main.js file for each spa uses:
app.setRoot('view models/spa1/shell), app.setRoot('view models/spa2/shell), etc.
Finally, by structuring this way, you move the main.js files up the structure which eliminates the ../../../ in all your defines.
I hope this helps.
I'm just taking a look at Sproutcore (gem version 1.6.0.1) to see what I can do with it.. so excuses for the beginner questions...
I've gone through the tutorial and looked at the doc mini-site.
I'm wondering how I should organise my source code files. After building the really simple todo app I've already got one messy monolithic javascript file that contains a model, some views, some view controllers, etc.. i can't picture this scaling well.
I've noticed that if I add another js file it is automatically inserted into the project when I load the app in a browser but I'm second-guessing what order those files go in - alphabetically my file (test.js) should have been included before todos.js but it wasn't.
What's the recommended approach to organise a larger scale app; are there some guidelines for this?
Couldn't see anything on the sproutcore website, strangely enough..
What if I want to share models between apps, is that possible too ?
Thanks
The helper tools should arrange the files for you. Granted, you might not use them. Here is the folder structure I have from a project I did a while ago
So under the root project directory, there is an apps dir, a frameworks dir, and a Buildfile and README (the other stuff you see is not necessary for sproutcore).
In the apps dir, you see the main app (sudoku in this case) directory. Under it, you see, directories that directly relate to the objects you are going to create -- datasources, controllers, models, views, states, etc....If you put more than one app in the apps dir, you can access both from localhost:4020/, i.e. localhost:4020/app1 vs localhost:4020/app2
I didn't expand the frameworks dir, but in it are all the frameworks the project uses. So if you want to modify sproutcore, you can put the version you use in frameworks, and the build tools will use that version. It is a good idea to make your model layer its own framework, so you can use it with other projects if you want. You model framework should be completely decoupled from the rest of the app; it should expose an API that any client app will use.
You can further create other directories under these directories at your discretion. For example, if you have a complicated application around a Person model, you can create person directories under models, views, controllers, etc, and then put your code in their.
Note that if you have a PersonController object, the file name would be person.js according to convention, but that's up to you.