We're in a process of migrating an existing ASP.NET Core Knockout.js / JS application to Vue.js / Typescript.
While the JS side gains the type-safety by the TS migration, we're having a hard time finding something that would do this checking for the HTML templates with vue bindings.
My idea (dream) would be something similar to what Razor does with it's typed models when having the precompile views option selected (when something's wrong with the bindings, it fails the build raising an error)
Is there any VS plugin, command line tool, or anything else that could provide this compile-time checking for Vue.js HTML templates?
EDIT:
To clarify better, let's say the template is
<div id="root"><div v-html="myProp"></div></div>
And very simplified Vue is like this
new Vue({el: '#root', data: { myProp: 'my neat property value' }})
Now let's say someone makes a typo in the model property name so it's for example like this
<div id="root"><div v-html="myPrapNotExisting"></div></div>
If I did something similar in Razor, it would complain once the views are compiled and it would stop the build, however I haven't found anything similar for Vue (or knockout either)
So question is, is there a clientside MVVM framework, where templates could be compile-checked?
Related
I have a Laravel 5.5 project that contains a lot of views in Twig format. In order to support Twig, the project uses the rcrowe/twigbridge package.
This works, but it’s now the only project that I have which uses Twig. Everything else is on Blade. I would like to move this project on to Blade templating, too.
However, I can’t commit a lot of time to this project and do the entire Twig to Blade transition in one go (unless there’s an automatic translator that I should know about?). Therefore it would be helpful to be able to render both Blade and Twig within the same project, at least until the transition is complete. How can I do this?
When it comes to Ajax, it looks like Symfony (v. 2.7) and AngularJS (v. 1.4) don't go well together ;-)
I see two ways to make them cooperate - my question is: Which one is better?
Adapt AngularJS to be compatible with Symfony
Adapt Symfony to be compatible with AngularJS
For 1, this is the best instruction I found:
http://harmssite.com/2014/09/mixing-angular-and-symfony/
Advantage: Can use $form->handleRequest($request); in Symfony to get all form fields at once.
Disadvantage: Cannot set default value's for <input>'s, cause AngularJS overwrites them. Solution:
Set it in Angular's controller (i.e. in app.js). But if the value comes from the database (i.e. Symfony), how can you get it into app.js? Render the entire app.js file through Symfony's templating system? => Looks like overkill to me.
Set it inside the HTML/twig file with ng-init, as shown here:
AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?
=> This is more a workaround than a solution ;-)
For 2, the major disadvantage is that you need to read each form field separately into Symfony, using $post = $this->getRequest()->getContent(); as shown here:
AngularsJS POST JSON data to Symfony2
I haven't tried this approach, so I don't know if there are further problems down the way ;-)
After fiddling around with this for a while, I finally came to a solution: Kick out AngularJS completely!
As far as I understand it now, AngularJS is only the way to go, if you are processing your forms completely (or at least mainly) on the client-side. I guess, that's what they mean by "Single Page Application (SPA)".
If you're using Symfony for form processing, AngularJS probably makes your life harder, not easier.
I'm now using plain jQuery for JavaScript, and everything works like a charm (including Ajax), much more hassle-free than AngularJS was.
If you just need to handle AJAX Requests from AngularJS to Symfony2 server, using classic forms (without Symfony2 form builder), you can use this bundle :
qandidate/symfony-json-request-transformer
Add it as a dependency in your composer.json and handle your requests (POST & other methods) in the same way as classic request.
You can See my post about this problem : Handling HTTP Requests from AngularJS to Symfony2
Other tip, to use AngularJS in your twig templates, add this in your angular app :
var app = angular.module('yourApp', [],
function($interpolateProvider){
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
This will change your start symbol from {{ to <% and your end symbol from }} to %>
In my case, use AngularJS make my work easier and me more productive, especially coupled to a Symfony back-end, but it's very personal, and depending on why/how angular is used.
I was at an interview yesterday and the interviewer asked me a few questions about blade and I replied saying that I don't use blade and only use Laravel to build RESTful web services which I then consume using a front end technology such as Angular.
He insisted that blade was very useful and there a few disadvantages to not using blade. I couldn't understand what he was talking about. And neither do I clearly remember any points he made.
I am curious to know are there any disadvantages to not using blade in Laravel?
In my opinion there are a few advantages of AngularJS over blade and vice versa:
Advantages blade:
Laravel has some html helpers and form helpers.
Laravel adds a token to a form for preventing csrf!
When you open a form you can give a route to it. The method and the action are defined by blade based on the given route.
With blade you can create macro's and view composers.
When validating a form you can return back with the input and the errors which is quite easy.
Blade is not realy slow because laravel cache the compiled views.
With blade you can extend and include views which is more DRY(Don't Repeat Yourself)
On paginator objects you can call ->links() which is very easy for pagination although this is also nice to do with AngularJS.
Blade can automatically escape you're data with {{{$var}}}.
If you've to write a multi language application blade and laravel comes with easy methods to do achieve this.
This are in my opinion the advantages of blade. Look at the blade docs for more information and figure out what you like!
How do I share template information between my PHP backend and JavaScript / AJAX requests?
Times ago I just sent my AJAX requests and had the HTML generated by the server and sent as such. Today I have my AJAX data as JSON but I have no idea how to use the same template (e.g. a users list) at the server side and (for refreshing, filtering etc.) at client side without creating redundant layout code.
Is there a template language with parsers as well for PHP/Laravel and JavaScript?
The Laravel template engine Blade is obviously not usable in JavaScript.
The only sharing template language I found via Google was Mustache, but the parser for Laravel was outdated.
Is there anything else out there and which approach do you use for that?
Your boiled down question:
Is there a template language with parsers as well for PHP/Laravel and
JavaScript?
Laravel and Mustache | server side:
conarwelsh/mustache-l4 is a Mustache.php wrapper for Laravel 4. They seems to keep up very well as opposed to what you tell (I presume you mean michaelenger/mustacheview which is actually a Laravel 3 bundle). I stand corrected if am wrong.
Laravel's Blade doesn't rule out Mustache at all. You just have to create a Mustache partial without using blade.php extension and include it within a regular Blade template using #include (More details here)
Serving Mustache template:
You can even coin any custom Response you need using Response Macros such Response::mustache(...) leveraging Response::make(...) (see here for more details).
Some samples of interest:
Combining Laravel 4 and Backbone.
Sharing Templates Between PHP and JavaScript | PHP but still relevant!
My short answer (Updated):
Don't look elsewhere: Laravel + Mustache + Javascript if a mix of server|client side rendering is part of your requirements.
Get your hands dirty! :)
I had the same issue with Laravel and Angularjs, what I did is that I created a route to return templates http://domain.com/templates/name
This route will View::make('templates'.$name);, this is an AngularJs template that will be filled with data returned by JSON API. Remember to use non conflicting tags I used {{ for Laravel and <% for Angular.
RENDER YOUR TEMPLATE SERVER SIDE! I'm not sure at what point someone decided you needed to send JSON to the front end, but that's not how they do it in Rails. In Rails, they actually render the template server side, then send it back to the front end and your JS appends it to the page (or, actually sends back the JS + the markup to attach). This saves a ton of time and headache, trust me.
This question already has answers here:
Knockout + mvc 3 + Validation
(4 answers)
Closed 9 years ago.
I am new to knockout and pure js/html frameworks as a whole for creating web sites. However I do have experience with ASP MVC.
In my current project I was originally using MVC to do the back end work, and the front end ui stuffs. With alot of jquery plugged in and other event frameworks etc.
Anyway I am looking at moving the project to mobile devices using PhoneGap, and due to this am moving the backend concerns from the ASP MVC app to a web service (still ASP MVC, but just exposes and consumes data, no views). So this got me thinking, the back end will be responsible for receiving data and auto binding it, validating the model, then persisting it, and returning a relevant result. This way the PhoneGap versions can re-use the jquery and javascript currently used on the front end, and they can consume the data and send the data to the service directly through PhoneGap.
Now with that said, my current web app would become a little redundant, as there is no benefit in my using the asp mvc framework as the same work is carried out on the web service, and also most of the heavy work is client side, although I do heavily make use of clientside validation and partial re-useable views.
So with this all being said, I am looking at scrapping my web app, and just moving it to use Knockout and communicate directly with the service, to cut out the middle man. However I would still need to be able to re-use partial views and would need some sort of validation for the models.
Can Knockout provide this functionality for me? or are there any other plugins/frameworks that allow me to do this?
Knockout has built in templating features (using jquery.tmpl.js or it can use other templating plugins if you choose). Knockout also plays nicely with other js frameworks so using jquery is no problem and most jquery plugins should be accessible from within Knockout. There are also a few examples in the Knockout documentation that use the jquery validation plugin.
Validation Example
Data-Binding Syntax
Templates