I want to Create a Framework , like Admin panel , which can rule almost all the aspects of what is shown on the frontend.
For an eg (Most basic one): If suppose the links which are to be shown in a Navigation area is passed from the server, with the order and the url , etc.
The whole aim is to save the time on the tedious tasks. U can just start creating Menus and start assigning pages to it. Give Url, Actual files which are to be rendered (in case of static files.), In case of dynamic files , giving the file accordingly.
And this is fully server side manageable using different portlets, sort of things.
So basic Roadmap is having :
Areas like :
Header Area - Which can contain logos , links etc.
Navigation Area - Which can contains links and submenus.
Content Area - Now this is where the tricky part is that that It has Zones like : Left , Center & Right. It contains Order in which it has to be displayed. So, when someday we want to change the way the articles appear on the page, we can do so easily, without any deployments. Now these Zones , can have n no of internal elements, like the word cloud , or the advertisment area.
Footer Area : Again similar as Header Area.
Currently there is a Framework already existing, this is using XSLT files for pulling out data from server sides.
For an eg: If there's a Grid it will be having a tag embedded in the XSLT file. Now whatever might be the source of the data , we serialize this as XML and give it to the XSLT file and the html is derived from this and is appended to the layer in a page.
The problem with this approach is :
The XSLT conversion is occurring on the server side, so the server is responsible for getting the data , running XSLT transform, and append the html generated to the layer div. So, according to me firstly this isn't the server's concern to do so. Secondly for larger applications this might be slower.
Debugging isn't possible for XSLT transformation. So, whenever we face problems with data its always a bit of "Trial & Error method".
Maintaining it is a bit of an eerie job i.e. styling changes, and other stuff.
Adding dynamic values. Like the JavaScript cant be actually very easily used in this. Secondly, we cant use JQuery or any other libraries with this since this is all occurring onto the server.
For now what i have thought about is using Templating - Javascript - JSON combination at the place of XSLT , this will be offloaded to the client and the rendering will take place accordingly.
What could be other ways to implement a Custom CMS ?
What could be the problem with JavaScript based approach ?
Are there any existing frameworks for similar usage ?
Related
I have a requirement that the user may choose different templates for his page say for example for user profile page, our web app should give multiple types of templates to show the profile, user might pick any one template. In future we may enhance the same feature by giving more freedom to user over templates, he can customise the template the way he wish to,
Example for customising a template is : he can move his profile pic from Left side to right side , he may change background colour etc.
What are the best possible approach for this kind of UI ?
Do I need to keep meta data of whole page and then create it at client side ?
Do I need to create the whole html at server side and just load it at client side ?
Are there any frameworks for JADE/Node.js for this kind of UI development ?
I am totally new to this kind of development so suggest me the proper way.
You easily quite easily accomplish this as follows:
Present the user with a form and a select box (or alternative) listing the theming options. Save this to the database under their user, or alternatively if your app has no real backend to speak of then you could save it to local storage (though in this case the setting will probably be reset before too long on the user's end).
With JS, on page load, determine their chosen value (AJAX call or check local storage) and append a class to a wrapper around their profile page dynamically, e.g. profile--colorful, profile--thin, etc.
Style each profile differently in CSS using those classes.
I am working on a React app which allows users to drag and drop UI elements to generate a template. At the end of the process, we have an HTML preview of the template displayed to the user.
What would be the best way to save this HTML (along with the styling) to the server ? A few approaches we tried:
Convert HTML to string and persist. This makes it difficult to import these templates at a later point in time (and extract the react components out of it)
Store all the HTML and styling data in some JSON format. But there is just too much to store (all the margins, padding values etc.)
Any ideas?
EDIT : The reason I am asking this is because there might be a totally different way of storing templates server side which I might be unaware of. For example, we currently store .docx files as templates. They provide an easy way of representing (and visualising) all the styling info of the document. And it is convenient to just save the docx file, than to parse through the HTML and extract all the styling info into a JSON. Now we are doing away with .docx because of some business limitations.
I am trying to figure out how to develop a multi-lingual website. My background in HTML, JS, CSS is not that broad (I have started only a week ago), therefore my understanding of this may not be the best.
For our example we will be creating three language mutations:
English (main one)
Spanish
French.
Here is what I have come across when I started searching for this under uncle Google.
The longest solution I can imagine: Create three folders named en, es, fr. These will contain the replica of the original webpage (e.g. index.html), but will be translated to respective language. Then on the top panel, you will have a button which upon clicking it will redirect used to a different folder (link is hard coded here). This solution is feasible if we are dealing with very small websites (with a few pages).
Second option I have found, was using WordPress plugins (found quite a few of those). Unfortunately, this solution is not viable, as I am not using wordpress to create a website.
Next option (which I believe would be the best), is to have one page for all language mutations, but instead of real text, you would insert some attribute with the key, which will determine what phrase should be inserted here. It could look like data-toTranslate('sTitle') (making this up). The question now would be, where would you store your texts? One option would be into a database, but I have not worked with them (under websites), therefore I would prefer something like a text file / csv file / or something like this. The problem I have with this solution (except the fact that I don't know how to do it yet :) ) is that I am not quite sure how website would react to this in terms of loading time. Maybe this is the best solution for a developer, yet the worst for the website?
Any comments, links or suggestions which would point me in the right direction would be more than welcome!
EDIT: as this question may seem too broad, I will try to trim it a bit down.
As I believe the option number three would be the best, then I would like to know the following things:
1) What do I need to create when I want to store simple key - value pairs (such as in this translation)? If I were in C#, I would e.g. create either simple XML or CSV file and I would parse it during runtime.
2) Can I achieve this with a simple JavaScript, or do I need to create some specific controllers / directives with AngularJS?
Create the english version of the website statically, as this is the main language. You should have a separate ID for every text element (and don't use obe word ids such as "a" "b" etc., so you can easily fibd them later.
Have a file on your server (text file works too) with the ids of fhe text tags, and the text in a format like
welcome-text | ["Welcome to the website" in Spanish]
-------------
Etc...
(Note: yoh need to store the translated sentences, but I don't know Spanish nor France)
Name your file to something like Spanish.txt.
When the page loads, download this file with javascript trough AJAX (this is where the static english version kicks in as a fallback), loop trough the text file and set the texts to the translated version.
You can of course use PHP with MysQL too, but I thought it is a bit overkill for 2 languages.
And yes, this can be done with 100% pure javascript, not even JQuery is required.
I normally using PHP to handle this multilingual. When every moment user view the website, it will set the default language to ENG. But, when the user select other language as the website display language, the website will reload and the PHP code will call the respective language folder to display all the selected language on the website. So, I think you should having few language folder, then dynamic calling each of the folder to get the keywords words and display it.
I wrote a React image gallery or slideshow. I need to make the alt text indexable by search engines, but because my server is in PHP, React.renderToString is of limited use.
The server is in PHP + MySQL. The PHP uses Smarty, a decent PHP template engine, to render the HTML. The rest of the PHP framework is my own. The Smarty template has this single ungainly line:
<script>
var GalleryData = {$gallery};
</script>
which is rendered by the PHP's controller function as follows:
return array(
'gallery' => json_encode($gallery),
);
($gallery being the result table of a MySQL query).
And my .js:
React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0));
Not the most elegant setup, but given that my server is in PHP there doesn't seem to be much of a better way to do it (?)
I did a super quick hack to fix this at first shot - I copied the rendered HTML from Firebug, and manually inserted it into a new table in the DB. I then simply render this blob of code from PHP and we're good to go on the browser.
There was one complication which is that because React components are only inserted into the DOM as they're first rendered (as I understand it), and because the gallery only shows one image slide at a time, I had to manually click through all slides once before saving the HTML code out.
Now however the alt text is editable by CMS and so I need to automate this process, or come up with a better solution.
Rewriting the server in Node.js is out of the question.
My first guess is that I need to install Node, and write a script that creates the same React component. Because the input data (including the alt text) has to come from MySQL, I have a few choices:
connect to the MySQL DB from Note, and replicate the query
create a response URL on the PHP side that returns only the JSON (putting the SQL query into a common function)
fetch the entire page in Node but extracting GalleryData will be a mess
I then have to ensure that all components are rendered into the DOM, so I can script that by manually calling the nextSlide() method as many times as there are slides (less one).
Finally I'll save the rendered DOM into the DB again (so the Node script will require a MySQL connection after all - maybe the 1st option is the best).
This whole process seems very complicated for such a basic requirement. Am I missing something?
I'm completely new to Node and the whole idea of building a DOM outside of the browser is basically new to me. I don't mind introducing Node into my architecture but it will only be to support React being used on the front-end.
Note that the website has about 15,000 pageviews a month, so massive scalability isn't a consideration - I don't use any page caching as it simply isn't needed for this volume of traffic.
I'm likely to have a few React components that need to be rendered statically like this, but maintaining a small technical overhead (e.g. maintaing a set of parallel SQL queries in Node) won't be a big problem.
Can anyone guide me here?
I think you should try rendering React components on server-side using PHP. Here is a PHP lib to do that.
But, yes, you'll basically need to use V8js from your PHP code. However, it's kind of experimental and you may need to use other around. (And this "other way around" may be using Node/Express to render your component. Here is some thoughts on how to do it.)
I need to implement a webform (JSP, struts) featuring loads of checkboxes and textfields. Basically I have a tree made of checkboxes which has to be extendable (like adding a new node). On another page the same data is used, but refined. So you add again child nodes to the mentioned data structure using textboxes etc. I can describe the datastructure in XML:
But contains about 100 rows in reality.
I found 3 approaches:
1. Do a webform in JSP which lowers the user experience because lots of postbacks are necessary (every time i add/edit/delete a node, subnode...)
2. do it in async fashion. -> loads of javascript to handle the structure of the data (keep the XML data in a hidden div and update ui)
3. go for a RIA like OpenLaszlo
What do you suggest?
If you already know OpenLaszlo, go for it. You will end up with a better user experience with less work.
You should target user interface and performance when developing an app. So IMO, plain JSP will be my last approach.
You can consider client side rendering.It allows to build very responsive web apps:
build your JSP pages to deliver JSON data, no HTML here
use a javascript templating engine in the browser to convert the data in HTML client side. I'm the author of PURE but there are plenty of others on the web that may suit better your style
when the user types or press submit, parse the form using a common technique found in many frameworks. i.e: the "name" attribute is the path to set the value in the JSON<input name="employee.name" type="text" ... />
When the form is parsed, post back the JSON to a JSP page that will read it and do the backend work.
You can use XML instead of JSON and XSLT instead of a JS templating engine, but if you target the web browser only, it adds an extra layer of complexity and trouble to parse the XML.