We have software developers (PHP, SQL) and web designers (HTML, CSS, JS, Foundation, Bootstrap) in our team.
A typical scenario: a software developer implements the business logic while the design is done by another person.
Problem: whenever there are changes in the frontend design, the designers have to send new designs to developers, they have to track changes and modify the sources.
Question: what tools/approaches are available to allow designers to work with the Twig templates directly, and apply changes to HTML/CSS/JS without backend developer help (without Symfony and LAMP installation, if possible)?
Or on a higher level - what is the best practice to separate backend and frontend development in Symfony 2?
Or on a higher level - what is the best practice to separate backend
and frontend development?
The frontend team, can work in the templates and send you the markups and then the backend developers will decorate it with the data, that is how it is usually done.
BUT:
The best approach that you can take to separate totally the 'Backend' work from the 'Frontend' work is doing it. :
Create your backend logic to serve the data at demand (Web service / API), instead of serving the views, send a response with a clean body that contains only the data in a readable format, like json objects.
Then the frontend developers can make the corresponding request to the web service to get the data and decorate their templates with it.
The only thing that you need to do is to provide them with the URL that will provide the data for the template that they are working, and the expected output/format that they will be receiving when requesting that url, so they do not even need any server working, they can mock your response while they are testing / creating the view.
Personal opinion:
I think that even for simple applications, this approach is great.
Why?
If you create your backend as a Web Service / API, then it would be easy to expand it, at some point your application would be used by third parties applications, or you just want to create a native mobile application version, or whatever. If that is the case you don't need to re write nothing.
Short History
I've seen huge proyects that were supposed to serve a web page, then it become populars and it ended with more usage from third parties than the web itself and were not prepared for that. They ended developing a web service, with half of the functionality for the third parties apps, and for each functionality that they added to the web service layer they used more code, more testing, and so on..
Come on, still writing?
Talking about web development, you can keep your frontend guys focused on display the data, style, and events of the page, while the backend guys keep focused in adding new features, so no one needs to distract the other side team just because they don't know how a tool from one side works, that for me worth the time that is saved.
The only "best practice" that I could recommend is to talk with the web designers and understand their needs.
Because TWIG is almost pure HTML
This is just plain wrong. TWIG may look like HTML but it's all about the data. Ask your designers if they would be happy seeing something like this in the browser instead of actual data:
List of Products
{% for product in products %}
{% endfor %}
Somehow I just don't think that will work for them.
I suppose there might be a tool out there somewhere that can convert TWIG into real HTML but what to use as data? If it does not match the back end data then problems will ensue.
I would suggest that you will need to teach your developers how to use composer update as well as your source control system. The database should not be a problem. You can have a single designer database somewhere that the back end folks can keep up to date. Someone else can install and configure the LAMP stack,
You could even setup virtual designer machines (perhaps with vagrant) that will be fully loaded with whatever software your designers needs for a specific project. Your developers might find these virtual machines useful as well.
The other approach is the nuclear option. Don't use TWIG. Your back end turns into a web api and only deals with data. No back end generated html at all. Your designers now have complete control over the front end. Bit radical perhaps but it does seem to be the way the industry is moving towards.
Twig is related to Symfony controllers for the "data".
If your designers wants to modify a html part of the twig templates, they can do directly into templates.
If they want to add additional elements which are related to specific data, the should work with backend developers in order to update controllers code and populate this data from backend to front-end part.
If you use symfony to provide only data (JSON based on lot of AJAX Requests from front-end) I think that designers can work alone with interface and mock JSON data in their local installations without using symfony code.
There is no "best practice" to separate backend and frontend development in Symfony 2, simply because it uses the MVC pattern, which in itself separates buisiness logic from views. All your views are gathered in a single directory, and the only job your designers will have is to display the data. Controlers and all the backend stuff is gathered some place else and is invisible to them.
Symfony is not an obligation (although it is the perfect tool for what you want to do right here), but I'd recommend you choose a framework that implements the MVC pattern, because it is the cleanest way to develop, and assures your code to be maintanable a long time from now.
I will share our solution/practice out of PHP, which completely separate the front-end works from the back-end and our designers and developers are separated in different departments, they are connected by redmine's tickets, but they do not need to communicate to each other in most cases, and also their work will not interact with others in most cases.
Out solution is based on java/javascript, simply we developed our own framework to combat with the issue about separating front from back. Currently we have two independent frameworks for this issue, one is for server side rendering by Java, another one is for client side rendering/binding by javascript, a client javascript MVVM framework.
At first, the basic idea of our frameworks is separating all the template rendering logic from the html template, thus our html templates are real pure html files, without any back-end intrusion.
The second step, our designers will complete their works on the independent html files without any consideration of back-end logic. Then at the same time, our back-end guys will write the back-end rendering/logic by separated java/js source.
Assume we have a html file like following:
<div><input name="name"></div>
<div><span id="name-preview"></span></div>
We will perform the server side rendering by java as following:
Render.create()
.add("[name=name]", "value", user.name)
.add("#name-preview", user.name);
Also we can perform the client 2-way binding by javascript as following:
Aj.init(function($scope){
$scope.data = {};
$scope.snippet("body").bind($scope.data, {
name:[
Aj.form({name: "name"}), //bind the $scope.data.name to input[name=name] in 2-way
"#name-preview" //bind the $scope.data.name to #name-preview in 1-way
]
});
});
As in the above examples, we use common css selector to describe where and how we want to render/bind our values to.
At a matter of fact, in our practice, over than 90% front-end refactoring would not need the help from back-end side. Even in the left 10% cases that our back-end guys have to fix the broken rendering/binding, the fixing would become very simple because we just need to change the target css selectors in most situations.
At last, although we implement our server side framework by Java, we believe it can be ported to any other languages such as PHP, ruby, python, etc.
The server side framework:
https://github.com/astamuse/asta4d
The client side framework:
https://github.com/astamuse/asta4js
I have to develop an application which takes XML reports stored in File System parse it and put it into database and display the reports by querying the database in various MIME types(XML,JSON,RSS and HTML). So what I have done till now is parsed the XML reports in the file system ,setup schema for database in MongoDB,put data in database using Spring-data and also managed to have a web service which shows rough draft of reports in XML,JSON and RSS feed.Now I want to display the reports in HTML as well and my supervisor suggested me to use Backbone.js to dispaly it in HTML format by calling the web service.Kindly advice me to choose b/w Backbone.js or write another Spring MVC web service which generates reports in HTML.
Thanks in advance
Swaraj
What you are asking are two different things and choosing between them.
You have to know what your overall objective is with the webapp is and what framework is best for it.
Short answer, Spring MVC integrates with Dojo.js right out of the box, which might do what you need to do, but since your supervisor is suggesting otherwise your options are:
Use Spring MVC to construct and display the data in the HTML using what ever render of your choice.
Or
Build out your Spring MVC wepapp API so that you can use a JavaScript MVC framework, such as Backbone.js or one of the many others (see TODOMVC for samples), to interact with your spring controllers.
Option 1 might be easy enough, used in conjunction with JavaScript or jQuery and plugins
Option 2 would be good if your webapp is complex and will be mostly a SPA (single page app) that utilizes a lot of JavaScript and you want a way to organize your js code better. See JavaScript MVC diagram for an example of how it works.
We’re currently evaluating development with Sitecore 6 for a project. The client already bought it, so using another CMS isn't an option. The proposed setup would have Sitecore as our site’s content data provider; which would be consumed by a site built in ASP.Net MVC 3. We’d use Sitecore’s libraries to retrieve data from the Sitecore database on the server side.
In some cases, we also may want to consume content data via client side AJAX calls. I’ve been working on prototypes for this to see what data I can get back from a custom proxy service. This service calls GetOuterXml on the item, converts the Xml to JSON, and sends back the JSON to the calling script. So far, I’m finding using this method limiting; as it appears GetOuterXml only returns fields and values for fields that were set on the specific item, ignoring the template’s standard value fields and their default values for example. I tried Item.Fields.ReadAll(), still wouldn’t return the standard values. Also, there are circular references in the Item graph (item.Fields[0].Item.Fields[0]...); which has made serialization quite difficult without having to write something totally custom.
Needless to say, I've been running into many roadblocks on my path down this particular road and am definitely leaning toward doing things the Sitecore way. However, my team really wants to use MVC for this project; so before I push back on this, I feel its my responsibility to do some due diligence and reach out to the community to see if anyone else has tried this.
So my question is, as a Sitecore developer, have you ever used Sitecore as purely a content data provider on the client-side and/or server-side? If you have, have you encountered similar issues and were you able to resolve them? I know by using Sitecore in this way; you lose a lot of features such as content routing/aliasing, OMS, the rendering and layout engine; among other features. I’m not saying we’re definitely going down this path, we’re just at the R&D phase of using Sitecore and determining how it would best be utilized by our team and our development practices. Any constructive input is greatly appreciated.
Cheers,
Frank
I don't have experience with trying to use Sitecore solely as a data provider, but my first reaction to what you're suggesting is DON'T!
Sitecore offers extremely rich functionality which is directly integrated into ASP.Net and configured from within the Sitecore UI. Stripping that off and rebuilding it in MVC is lnot so much reinventing the wheel as reinventing the car.
I think that in 6.4 you can use some MVC alongside Sitecore, so you may be able to provide a sop to your colleagues with that.
Is there any comparison to show why JSP/ASP.Net is better from security point of view? As I think, security depends on the server security, and website architecture and implementation, and only a name like JSP/ASP.Net will not guarantee your website and will not make hackers to run away!!
Is there any study or article to show bugs or security issues in the framework itself?
Both are just view technologies. Both are as secure as you can program it to be. Both does not automagically take care about security risks like XSS, CSRF, SQL injections, etcetera. It's the developer who's responsible for that, regardless of the view technology in question.
MVC frameworks on the other hand (like JSF which runs on top of JSP and ASP.NET MVC which runs on top of ASP.NET), by default already prevents XSS (if you code the view the right way, i.e. display user-controlled input using a component), but you still have to take CSRF and SQL injection risks into account yourself. The former is usually to be done using either a request based token or a captcha and the latter is usually to be done by prepared statements / named queries (for which a decent ORM framework would already take the work from hands).
Are there any third-party Templating Engines for Asp.net like we have smarty,savant for php ?
Spark: http://sparkviewengine.com/
Your question does not explicitly states what "breed" of ASP.NET you are using, so I guess it is most likely web forms. If this assumption is correct, I would not recommend for you to replace the default view engine. In order to make good use of the build in controls, you really want to keep the abstraction where HTML like elements can be marked runat=server and accessed from the server side code.
If you happen to use ASP.NET MVC, the picture is completely different. Here, there are lots of different view engines available - including NDjango, NHaml, Spark. If you are the type of web developer who care about the templating engines, you are likely to prefer ASP.NET MVC as a whole, and you might want to check it out before starting your next project.