I have an application in which UI is rendered on the server-side using Thymeleaf and the backend is in Spring Boot.
Now, we have a requirement to combine this application with another react application. So, it should be like micro frontend architecture.
For this, I am evaluating the framework Single-SPA and seems like a good option when we have separate frontend projects and we need to combine them in one.
Is it possible to integrate the existing SSR pages with Single-SPA?
This should be possible with single-spa-html as long as there is no JavaScript that is dynamically created. Another limitation is that single-spa-html doesn't process <script/> tags due to browser security. If your application can meet those requirements, it should be able to interop with single-spa-html.
single-spa-html allows providing a template asynchronously, so a fetch or ajax call could retrieve the microfrontend template from the backend. Then the corresponding JavaScript is included in the microfrontend instead of script tagged in.
You can also see an example of enhancing a static html mfe with JS here: https://github.com/filoxo/single-spa-html-with-js-example/
Note: I believe we discussed this on the Slack channel but I want to share here for the benefit of the wider single-spa community.
Related
I am build an application using Angular2 as front end framework and spring boot as backend framework.
One of the seniors in my team insisted on using JSP as templates for my components in order to avoid rendering any unauthorized views.
Is that really nessecary? I saw many applications which are implemented using angular or other front end frameworks but it did not render the templates in backend, is it a good practice? isn't authenticating the requests is enough?
Also would not that be a problem for performance?
From my point of view I think JSP will prevent us from using the potentials of Angular, any help or documentation on that subject would be much appreciated.
Short: No, JSP is not necessary.
Long: One has to realize where which part runs. JSP on the server, Angular in the browser. I assume your senior colleague is concerned about displaying unauthorized data - but that is not the concern of Angular. Angular is basically just the View, and, perhaps, Controller. But it has to get the data from the server - which is usually done over some REST service. And it is the duty of that service to serve only data the user is allowed to view. So you can implement your View/Controller part in Angular, putting all the views (event the restricted ones) in, and then implement proper security into your server-side data service.
No, it's not necessary to use JSP in Angular 2.
It's correct that JSP allows you to protect the template itself from unauthorized access, but in our case it's not really a bad thing to happen from the security point of view, as access to the template without the data itself is not something dangerous; The data of course must be protected w/ your own security/authentication to prevent unwanted access to it.
I'm currently building a web app using Laravel 5.1 and would like to start creating a native application so that my users can use their phones. I have decided that using the Ionic Framework is likely the best approach for the app and just have a few questions on marrying the two together.
I've got routes in Laravel that looks like this example:
app.dev/geckos - This is a GET request.
Which takes the currently authenticated user, uses their ID and fetches all geckos that match their user ID. It does return a blade view however.
I assume that when working with something like Ionic, the GET request would need to return JSON instead on order to loop through properly?
Is there a way that I can alter my controller to serve JSON based on if the route was something like this instead:
app.dev/api/v1/geckos
Both routes would use the GeckoController#index method, ideally I just don't want to repeat the code.
I'm fairly new to Laravel and very new to Ionic. So if I'm over complicating this theory please let me know.
Any information is appreciated on this,
Andy
Another solution which I used is to have 1. application in Laravel, which is a RESTful JSON API. Then you would have 2. Web app (in AngularJS) and 3. Mobile app in Ionic (which is based on AngularJS).
So you will create two separate applications, mobile and web, which both communicate with the same JSON API. The web would be a single-page AngularJS application, so that way you can reuse all the Angular services which communicate with the API, maybe even some controllers between your mobile Ionic and Web application.
You will save some time when creating two separate responses for mobile/web application, since you would create only one: JSON response. AngularJS will take care of rendering in both applications, that way you won't have to create separate templates for web applications in Blade, instead make all the rendering using Angular in both applications. There will be some nuances in rendering of the same content in Web and Mobile app, but it would only require creating separate js directives/css styles/html templates for both applications, using Blade you wouldn't be able to reuse any view related code between applications. Also you will be able to use the same Authentication method for both applications.
To sum up, this solution should be cleaner then your solution because you will be able to reuse backend entirely between the applications, reuse a lot of fronted stuff (like input validation code, services, filters,..), reuse Authentication and introduce looser coupling and have much clearer structure then the ugly response type switch in controllers.
EDIT:
So this can be a rough example of the structure of such project:
1. API - REST in Laravel, returning JSON
-Controllers
-Session // actions CREATE, DELETE
-User // actions CREATE, VIEW, UPDATE, DELETE..
-Gecko
2. JS application - Angular App, for both mobile and web app
-common //controllers, services, filters - most of the frontend logic which reusable between both applications
-controllers.js
-services.js
-filters.js
-mobile //this part can be hosted on some server or part of the mobile application
-app.js //separate configs for mobile app
-controllers.js //controllers only for mobile app
-directives.js
-web
-app.js //separate configs for web app (links to HTML template URLS,...)
-controllers.js //controllers only for web app
-directives.js
-services.js //or even services only for web app
3. WEB APP
-HTML Templates - bunch of static .HTML files
-Home
-Login
-Register
-Gecko
-Gecko Views...
-Some index file with layout template, which includes everything from js/common and js/web, entry point to your web application
4. MOBILE APP
-www
-index.html // must include everything from js/common and js/mobile
-templates
-Gecko
-Gecko Views...
But the structure may vary significantly, depending on what part of mobile application you want to have hosted on web server and which should be available offline, or how you want to host it, how detailed the structure might be..
Doing this would be messy because your single controller action will be returning two totally different responses.
However if you go down this route, you could add an additional header to the request from the mobile app, and then check for this to switch the response.
I've been studying the difference between single page apps and multi page apps, and I think I have good view how they differ. Single page app starts by loading a single html page, and then it does never again fully refresh the page or override the original, unless the application is otherwise refreshed (browser refresh etc.) For example, the angularJS seed project: angular-seed has an index.html file. This file is the single page, that the server would send to front-end, and after that, all the other (possible) pages will be send asynchronously under the hood by using AJAX. So if you create app just with the angularjs seed, it is always going to be just a SPA application, am I right?
How in practice would you then create a multipage application with angularjs? Wouldn't you need multiple angularJS applications then? Would you have to have a separate routing for each of those angularJS applications? And why would one want to make multipage application for angularJS? Because one could always use the first index.html just as a shell, without real content, and then have separate container-pages for different pages. Could it be said that angularJS multipage app would be an application, that would just contain many SPA angularJS applications? In SPA, can you use the browsers' back-button, in order to go back to last view?
Yes, you've got the idea of SPA and MPA right.
Angular.js enables you to create SPAs but does not force you. In an MPA, I would not speak of multiple Angular applications since you would have just spread Angular.js modules over multiple HTML pages. The page flow or routing logic would then be in Angular.js controllers, in plain hyperlinks or in the backend on the server.
There might be reasons to not put a whole application under Angular.js. Maybe the authentication part of a web application might be Held separately for some reasons...
In SPAs you definitely can use the browser's back button. You just have to implement that somehow. Twitter solves this Problem by coding the state of its web application into the URL - if you're using Twitter, you might have noticed the symbols (#!) in the address bar.
I have been looking at Hulu's new website and I am very impressed from a developer's standpoint (as well as a designer's).
I have found that, unless you switch between http/https, you are served content entirely from json requests. That is a HUGE feat to have this level of ajax while maintaining browse back button support as well as allowing each url to be visited directly.
I want to create a website like this as a learning experience. Is there any type of framework out there that can give me this kind of support?
I was thinking I could...
leverage jQuery
use clientside MVVM frameworks like KnockoutJS?
use ASP.NET MVC content negotiation to serve html or json determined by an accept header.
using the same codebase.
use the same template for client side and server side rendering
provide ways to update pagetitle/meta tags/etc.
Ajax forms/widgets/etc would still be used, by I am thinking about page level ajax using json and client side templates.
What do you think? Any frameworks out there? Any patterns I could follow?
It is always best to first build a website without AJAX support, then add AJAX on top of that. Doing this means that:
users without javascript can already access your website
users can already visit any URL directly.
Adding AJAX support can be accomplished by various javascript libraries. So that you can render json content, you will want to look at javascript templating. You will want to use javascript templating even on your server side for when you add AJAX support (file extension .ejs). This will probably require some appropriate libraries to run javascript on the server.
When you add AJAX support, you will want to use the "History.js" library for browser back/forward/history support.
Make no mistake. This is a HUGE project (unless your website only has a few pages). So it is going to take a LONG time to add all the AJAX support to the best possible standard.
to answer your bullet point about using the same template server side as well as client side: check outdust. It was originally developed by akdubya, but has since been adopted and enhanced by linkedin. They use it to render templates on their mobile app client side. Personally I've used it on the server side and it works great.
I am currently looking at implementing YUI 3.5 pr1 (and then the final version when released) in a fairly large application.
The backend is built with PHP and MySQL using a MVC structure with a front controller pattern. By it self, the server can process URLs (http://mysite.com/module/submodule/option) etc and return a fully rendered page.
I would like to implement the App Framework in YUI across the whole application so that javascript-enabled browser will effectively have something like a 1-page app with history management avaliable.
I am currently looking at the app framework docs on the staging site. Unfortunately, the docs aren't complete (in particular sections on routing coordination with server and progressively enhanced apps).
In any case, if a user visits http://mysite.com/modules/submodule/option with an HTML4 browser (all versions of IE), and he has javascript enabled, he would need to be redirected to http://mysite.com/#/modules/submodule/option.
Is this something that's built into the App Framework? I would prefer to utilise a solution that does not require the whole page to be rendered out and then redirected to the hashtaged URL and then rerendered again.
Finally, I have watched the intro video on the App Framework and it mentioned that they are using the Handlebars template engine. I am using Twig as my template engine on the server side. Is it possible to use an alternative template engine with the app framework? In particular the twig js engine.