I work on my web app with backbone.js and Marionette.js extension.
For an international website, I want to make a localization module with async load of an appropriate JSON for a specific language (detected in client side with the browser language).
At the first load of main page, Marionette get all of template with an async method.
How can I replace language string before the Marionette template was rendered ?
Thanks for help and for understanding my English!
There isn't anything Backbone specific of Marionette specific that you need to do. Any good JavaScript solution should work, and there's a great list of i18n resources for javascript in this SO question: https://stackoverflow.com/questions/48726/best-javascript-i18n-techniques-ajax-dates-times-numbers-currency
If you're looking for a plug and play solution that takes localization out of templates and does content management and translation service. I would recommend checking out Localize.js
Related
I am learning MEAN Stack. I started from learning Angular(from angular.io) now I am learning node.js and express.js
My question is, if there is angular for front end in MEAN Stack then why there are views and template engines in express.js at back-end? Are they alternative for each other or complements each other? what is the boundary for the role and responsibility of these two?
I am looking forward for someone's help in clarifying of my concept for role these two technologies(express' views and angular) used in mean stack.
In order to answer your question, let me explain what is angular and what are template engines in express?
What is Angular?
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
what is template engine?
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
So,
Angular is a framework with a templating component baked in. You use it to create Single page Web Applications which means that DOM modification is happening on the client side and the app exchange with server only data. If your concern is template it is plain HTML.
Whereas, template engines' rendered views are sent to client each time by server whenever request is made each time a new page is rendered on server and sent to the client which is Great for static sites but not for rich site interactions.
If there is angular for front-end in MEAN Stack then why there are views and template engines in express.js at back-end?
This is because not every time generating views from angular is recommended sometimes it is better to use Template Engines to generate views and send the rendered page to a client, generating views at client side has its own pros and cons and generating views at server side has its own.
Generating views using template engines (i.e. at server-side):
pros:
Search engines can crawl the site for better SEO.
The initial page load is faster.
Great for static sites.
cons:
Frequent server requests.
An overall slow page rendering.
Full page reloads.
Non-rich site interactions.
Generating views using angular engines (i.e. at client-side):
pros:
Rich site interactions
Fast website rendering after the initial load.
Great for web applications.
Robust selection of JavaScript libraries.
cons:
Low SEO if not implemented correctly.
The initial load might require more time.
In most cases, requires an external library.
So, after knowing the pros and cons, you yourself can better decide that in particular case which one is better for you. Mean Stack has provided options for developers.
As far as your question regarding the role of these two technologies is concerned, Angular is a lot more view generator only, It has features like routing, it as services two-way data binding etc while the template engines are meant to render HTML so that it can be sent to the client.
I hope you will find this answer useful.
References:
what is the template engine?
what is angular?
pros/cons
Angular is a full-fledged front-end framework that comes with its own way of doing templating, using angular-specific markup in your HTML. If you use Angular as your framework, you're more or less stuck with their way of templating within the Angular portion of your application.
Angular Features
It is a framework written in Javascript language
Manages state of models
Integrates with other UI tools
Manipulates DOM
Allows writing custom HTML codes
It is meant for javascript developers to create dynamic web pages in a quick time
NodeJS
It serves the web
It is runtime built on javascript engine in google chrome
It can be considered as a lightweight server which can serve client requests in a more
simpler way than java does
It performs communication operation with databases, web-sockets,
middleware etc.
Why we use angular for Tempting not Express/Node tempting Engine
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The request usually only takes a few milliseconds, but that ultimately depends on a multitude of factors:
Your internet speed
how many users are trying to access the site and
how optimized the website is, to name a few
Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.
It doesn’t matter if the new page only has a few items that are different than the current page, the browser will ask for the entire new page and will re-render everything from the ground up.
How client-side rendering works
When developers talk about client-side rendering, they’re talking about rendering content in the browser using JavaScript. So instead of getting all of the content from the HTML document itself, you are getting a bare-bones HTML document with a JavaScript file that will render the rest of the site using the browser.
This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.
See Examples HerePratical Example
Basically template engines in Express are mostly used for displaying 404 and other server error messages. I find them ideal for such use cases. Using template engines for complex front end rendering is bad and not a good practice.
Express JS is a web framework on top of nodejs http module. Whereas Angular JS is a front end framework which doesnot depend on NodeJs server to run. Conceptually both are similar in few features like routing whereas implementation is different
How is it possible to load external templates from the server during runtime with react-templates (or other reacte template system)?
I can't find any doc's about it but noticed that some people mentioned it as answer in SO questions.
Or should I just implement it my self and use the function "dangerouslysetinnerhtml" to inject the html?
What I want to do?:
Store html/css snippets in xml (or json), that is produced/managed by a CMS and load these in a react app. It makes it very easy to change the html, or support different languages without changing the code and making a new deployment.
I have an app running that is doing exactly that, that I have made with Google GWT, and I want to do the same in the react app.
First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.
My project is a order taking project and it has structure like this.
In the index page it has 3 panels.
left panle that draws all categories
middle panel that draws all category specific productes
and right panel that draws all the basket items with calculations.
On product click there also appears a model that draws all the customization.
I am using MVC-4.
Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.
My concern is.
If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view.
Just gimme some guide lines that i should follow to create this kind of application with angular.js.
Or it is not possible with angular because i think it is not a single page application.
Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template
Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.
Learn the Angular Routing and Templates to mimic your requirements.
https://egghead.io/lessons/angularjs-routeprovider-api
https://egghead.io/lessons/angularjs-ng-view
It seems you have a problem to define what you really need.
AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).
So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.
Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.
You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller. For creating the modal popup I would probably use ui bootstrap's modal
Alternatively you could use ui-router to create multiple parallel views.
I have following guidelines here which i hope will help you.
Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.
But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, e.g. in $http.get( .
I am currently using the Backbone philosophy which involves dust.js for template style. Recently I came across AngularJS, which extends the HTML syntax with custom elements and attributes.
Cons of Backbone+dust.js environment:
Upgrading components is time consuming.
Module specification and identification is not easy.
If I move my functionality to AngularJS will it be helpful or does it feel the same?
Can anyone explain to me what the major differences among these two libs are, as they seem similar to some extent?
dust.js is purely a templating module. So, it allows the combination of json with a template to deliver html output.
Angular.js is client side framework that allows binding of logic to variables defined in a template (your page).
So, with dust.js you are responsible for deciding when to run the json through the template. Typically you feed in the json on the server (or client) and ask it to render the results.
With angular.js when the model (the json) changes the framework re-renders as appropriate. Triggers for that change could be user actions (such as filling a form in) or it could be due to loading some fresh json from a service.
Typically you would use angular.js if you want a single page JS app (think gmail). dust.js is perhaps more akin to a traditional approach with multi pages with content driven by passing in json.
You could even use the both of them in tandem - server side rendering using dust.js with dynamic client side logic in angular.js.
Does anybody know a library or project that allows for an AngularJS style of programming in Dart?
I'd like to be able to create annotated HTML files for declaring my UI instead of imperatively instantiating everything like in SWT. Also, features like data binding would be helpful. Can I use Dart for that instead of JS?
angular.dart - official port of Angular to Dart.
Old answer:
Another option: Web UI. There's a new article on it here.
The angularjs team announced a port for Dart a couple of days ago
Here you go the link http://news.dartlang.org/2013/06/angularjs-announces-port-for-dart.html
You should check out Buckshot from John Evans. Buckshot gives you declarative UI and data binding. https://github.com/prujohn/Buckshot
There are a bunch of UI frameworks being created for Dart right now. I know about PureMVC, Buckshot, and HipsterMVC, but there are probably others. I don't know which of these are like AngularJS.
Google also just released an article on using Web Components in Dart.
AngularJS uses the new methodology of MVC (Model-View-Controller) to separate information from the user interface. Many web frameworks, most notably Ruby on Rails and ASP.NET MVC 3 and MVC 4, use this methodology to make programming web apps easier, in my opinion. JavaScript libraries, like AngularJS and Backbone are beginning to use this style of programming on the client-side as well. For Dart, I would take a look at Hipster MVC. Its still being developed, but it looks very promising and should be completed soon. Hope this helps!