I am currently migrating a Play Framework application with a view composed entirely of Twirl templates into one with a view composed of a mix of Twirl and React. I have written a PlayRunHook to integrate Webpack with Play's build process, and the result is JavaScript bundles whose names match what I have hardcoded in the new barebones Twirl templates.
So things look like this:
#(title: String)(implicit session: Session, staticAssetResolver: StaticAssetResolver)
#main(title) {
<input type="hidden" name="pageTitle" id="pageTitle" value="#title">
<div id="content">
</div>
<script language="JavaScript" src="#staticAssetResolver.asset("dist/profile.bundle.js")"></script>
}
The React code in the bundle knows to mount at the "content" div and receives props provided in the template.
This all works well, but I would like to avoid hardcoding the bundle name so that I can benefit from asset fingerprinting. This means figuring out a way to more tightly couple Webpack with Play's build process so that Webpack's output can be incorporated into the Twirl templates.
I have researched plugins, but what would you suggest for integrating Webpack and Twirl in this way?
This is probably not what you want to hear - I too messed around with trying to figure out how to embed interactivity in Twirl... but in the ended I concluded it was a back idea to mix javascript and twirl, ended up doing this;
https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd
It could be that I'm simply not familiar enough with Twirl, but after wrestling for quite a while, I found that simply "changing worlds" into react, and having it talk to the backend via
fetch(/api/myRoute)
was quite productive. In conjunction with React Router I found myself very happy with the productivity, performance and outcome. I spent little time on "custom" build work, outside of copy and paste from that blog, so was able to concentrate on what I wanted.
I would also say that I am not skilful enough, and did not have time to start writing custom "RunHooks"... so that may also be the problem!
The above link worked well for me... with the only downside being that when changing routes one gets no tool support... so it is manual and risky to change a backend route or method signature. Probably not great for a big app... but for my small set of requirements was an effective strategy.
Related
I want to prototype a quick app but don't want to go down the road of using a framework like React or Vue. I'd also prefer not just creating an html file and a js file that is imported within the html.
Is there a way I can make use of npm packages, SCSS and still write vanilla Javascript without the usage of a framework?
Without using a framework, the most straightforward way to using NPM packages in the browser would be using Browserify. Check out https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072 for instance.
Otherwise you can use Gulp,which helps running Browserify, SCSS etc, and use BrowserSync to refresh on changes. But I personally wouldn't go this way: while this is a great way to understand how stuff works, it takes a bit of time to setup properly, and isn't used that much anymore.
My advice is:
Go with Webpack or Rollup. Seems harder to grasp than Gulp but at the end of the day, learning Webpack is very useful (much more than learning Gulp), for instance if you happen to work on a project that uses it (and there are so many).
Use a backend framework that bundles all this kind of stuff. Like Laravel which uses Mix - you can even use Mix without Laravel but there will be a point at which you'll probably need some static data, some routing, interactions... So if you need something more than just hardcoded JSON data, go with a framework. Laravel is great for prototyping but it's not the only one.
I have been looking for a few hours for something that could help my problem, but as of now, I havent found it.
The problem is:
I am working on an PHP/Latte server-side rendered website, where I have decided to implement Vue. However, since there is no possibility for me to change this website into an SPA, I need to just create micro components with Vue and use them inside the BE templates.
By that I mean that there is a .latte template, where I insert a <My_component /> element, which gets rendered client side.
Which is fine for some components, but others, like the main menu, product or something else important for SEO purposes, needs to be somehow pre-rendered for crawlers.
By now I have read 10+ articles and watched 4 videos on prerender-spa-plugin, which I am sure is a great solution for SPAs, but I dont think it would work for my case. Especially since I am not using Vue router.
Nuxt.js also seems like not what I want and would be a bit of an overkill in my case.
Basically I just need a webpack or Node based plugin, that would take .vue files, that I would need to be pre-rendered, and create (build) the static HTML for them. Which would be either automatically or by hand inserted into the .latte template.
Has anyone had any experience with this?
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
Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application
I am using Yeoman to auto-generate a project using Bootstrap & Sass. The one thing I am having trouble with is changing the default structure of the project to be more modularized. The generator is here on GitHub.com
Currently the application is structured like so:
/app
/images/
/scripts/
/controllers/
main.js
app.js
/styles/
main.css
/views/
main.html
index.html
I'd rather have it separated into individual directives with a core(shared) folder, so that it would be like so:
/app/
/directives/
/home/
home.html
homeCtrl.js
home.sass
index.html
app.module.js
app.route.js
But I am having difficulty figuring out the best method of modularizing the project. Am I supposed to be creating the file structure that I want with the pre-generated application, and then edit it within the Gruntfile.js? Is there a more streamlined way of doing this, or am I SOL doing it manually?
The best and elegant way is to follow their guideline around creating a customised template which you can use to generate apps based on it.
However, if this is a one off thing you probably won't need to bother unless you want to create something decent and share it with community, so other people can use your template and create their app with modularised structure.
Even if you don't try to write your own template you can still read the guide and modify the initial template generator to change the file structure before creating the app for you.
Here is another good article around template customisation:
https://scotch.io/tutorials/create-a-custom-yeoman-generator-in-4-easy-steps
This project appears to be abandoned. The most recent change is a year ago, there are 67 issues and 18 pull requests. It's probably only generating Angular 1.x code as well, and that may not be "up to date" with current Angular 1 best practices.
You can, of course, fork the project and make changes yourself, and even take over maintenance of it, but you might be better to look at something like Angular-cli, which generates Angular2 code, and is being actively developed.