Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web...

22
© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Modern Web Application Internationalization Shivangi Rai

Transcript of Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web...

Page 1: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Modern Web Application Internationalization Shivangi Rai

Page 2: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Agenda

• Evolution of Web app development • Impact on Globalization • i18n • Web App Architecture • i18n support for Web Layers • Case Study • Demo • Q/A

2

Presenter
Presentation Notes
I will talk about what is a web app , how the web app development has evolved and how it has impacted on Globalization then about i18n Also about Web application Architecture I18n at different layers of web app Case Study of adobe Story Demo and Q/A
Page 3: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Evolution of Web Application Development Impact on Globalization

Page 4: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Evolution of Web

Traditional Web Localization Support on Server End

4

http://blog.octo.com/wp-content/uploads/2014/03/web-application-models-over-time.png

Presenter
Presentation Notes
A web application is an application that can be accessed by the users through a Web browser or a specialized user agent. In the early days of the Web each individual web page was delivered to the client as a static document , every significant change to the web page required a round trip back to the server to refresh the entire page.
Page 5: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Evolution of Web

Traditional Web Localization Support on Server End

AJAX Localization Support on Java-Scripts

5

Presenter
Presentation Notes
With Ajax, web applications could send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page
Page 6: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Evolution of Web

Traditional Web Localization Support on Server End

AJAX Localization Support on Java-Scripts

MVC Technologies Localization Support on the client Side , JavaScripts

6

Presenter
Presentation Notes
With MVC Engine support on browsers , more logic was written on the Client side. With Client side Frameworks like AngularJS , ReactJS , Backbone.js , apps were thick client applications.
Page 7: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

i18n Web Apps

Page 8: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

• What is Internationalization ? • Why is i18n important ? • Things to keep in mind

• Unicode Compliance • Number/date Formatting • Strings Externalization • Currency • Layout and Text Rendering etc.

Why Internationalization ?

8

Presenter
Presentation Notes
Internationalization of software means designing it such that it supports or can be easily adapted to support the needs of users speaking different languages and having different cultural expectations, and enables worldwide communication between them. Why is i18n important ? Business Perspective World Ready Applications The developers don’t want to be confined to a geographic location and would definitely want more business. Add etc , Unicode compliance
Page 9: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Modern Web App Architecture

9

http://chskr.blogspot.com/2016/01/crud-application-using-angularjs-nodejs.html

Presenter
Presentation Notes
Modern Web Architecture :- Data Layer Business Logic Presentation Layer Client Layer
Page 10: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Data Layer i18n

• Database must be Unicode Compliant. • Database must be designed in a way to support

multilingual resources. • Images

• Documentation

• Drop Down Lists

10

3

4 5

Page 11: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Business Layer i18n

• What is the business layer ? • Why it must be independent of localization ? • Business Logic if different for different locales

then handled at this layer.

11

3

4

Page 12: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Presentation Layer i18n

Dynamic Content Numbers Date Currency Address Formatting Third party integration

Static Content Images Documentation Resource Externalization String Externalization

12

3

4

Presenter
Presentation Notes
Change string externalization to
Page 13: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Client Layer i18n

Browser support for i18n Supporting ECMAScript Internationalization API

Language Negotiation Browser APIs for setting the locale

13

3

4

Presenter
Presentation Notes
Add sub points
Page 14: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Web Client Side frameworks

What are the available web client side frameworks ?

Why are i18n modules important ? Available i18n modules

14

Web Client Frameworks

i18n Libraries

Angular Js Angular Translate/ i18Next

Ember.js Format.js/i18Next

React.js Format.js/i18Next

Angular 2 ng2-translate

Presenter
Presentation Notes
Add angularJS2
Page 15: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe Story Development and Internationalization

Page 16: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe Story Case Study

• What is Adobe Story ? • Challenges in Adobe Story i18n • Angular JS/Angular Translate

16

Presenter
Presentation Notes
What is Adobe Story ? Adobe Story is a collaborative script development tool  based on HTML 5
Page 17: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

i18n Challenges for Adobe Story Web

Third Party Integrations i18n Suppport Etherpad

CoralUI

String externalization with Typescript and Angular JS

Testing the web Application in other Locales Adding test locale

Why and how ?

17

Page 18: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Angular JS

What is Angular JS ? Why Angular JS ? Angular supports i18n/l10n

for date, number and currency filters

18

1 2

3

4

Presenter
Presentation Notes
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Good for CRUD applications. Provides features as :- Data binding, as in {{}}. DOM control structures for repeating, showing and hiding DOM fragments. Support for forms and form validation. Attaching new behavior to DOM elements, such as DOM event handling. Grouping of HTML into reusable components. In general, it separates out the application logic into three separate parts, promoting modularity and ease of collaboration and reuse. It also makes applications more flexible and welcoming to iterations. To make this a little more clear, let's imagine a simple shopping list app. All we want is a list of the name, quantity and price of each item we need to buy this week. Below we'll describe how we could implement some of this functionality using MVC
Page 19: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Angular Translate

Features of Angular Translate:- o Filters and Directives o Asynchronous Loading o Pluralization through Message Format o We can build your own loaders, storages or

error handlers and extend angular-translate to your needs

19

Presenter
Presentation Notes
The nitty-gritty As you can see, angular-translate provides a directive and a filter as components you can use to translate your apps content. The directive appears on top of the filter component because it makes use of it internally. In the next layer it gets a bit more interesting. Both, the directive and the filter use the $translateservice. Which means, when translating contents of your app with a directive, you're actually doing it with the filter, which actually does it with the service. This also means that you can not only translate your contents in the view layer in a declarative way, but also (of course only if needed) in a business logic layer like a controller or another service. Within the $translate service you can see some sub components which are used by it to translate your contents. We'll get into this in a more detail later but nevertheless its good to get an overview of what's actually happening there. Interpolators The right box represents possible interpolation services $translate service uses to interpolate your translations against variable values you might want to use there. If you don't understand what this means, no worries. You'll learn everything you need to know about interpolators later. However, interpolation services are decoupled from the main core, which means, you can install them as extra packages. There's a default interpolation service which ships with angular-translate built-in. Interpolators influence the syntax you have to use within your translations. The default interpolation service uses Angular's core interpolation service, so if you familiar with it, you don't have to learn anything new. The MessageFormat interpolation service uses a different syntax, but more on that later. Missing translation handlers The left box shows provided missing translation handlers. These get executed when $translateservice tries to translate a key which doesn't exist. You don't have to use any handler, but if you want to, angular-translate comes with a logging service you can install as an extension. In addition to that, you can also implement your own handler and use it. Asynchronous loader Of course you want to be able to load your translation data asynchronously to speed up your apps performance. angular-translate supports the use of so called asynchronous loaders, which are very easy to use. There are two asynchronous loaders, urlLoader and staticFilesLoader. Both of them solves a specific situation when it comes to asynchonous loading of translation data. Anyways, of course you can build your own custom loaders and use them if you want to. Storage Since its pretty common that an app, which provides multi-language support, should remember the language a user has chosen during runtime, angular-translate gives you a way to use any kind of storage. It checks if it should rely on any storage and if so it tries to find a specific key - value pair within the configured storage to determine which language actually should be loaded. angular-translate comes with support for localStorage and cookieStorage. You can easily install extension packages to make use of them. Now you got a little overview on how angular-translate is structured, which kind of features it provides and how the components are connected. In the next chapter you'll learn how to start with angular-translate.
Page 20: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Demo

Angular Translate Demo Ease of Use

https://github.com/shivangirai/webapp-unicode-2016-demo/

20

Page 21: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's

© 2016 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Key Takeaways

What is i18n and why i18n ? i18n for web apps Web modules for i18n Angular JS / Angular Translate

21

Page 22: Modern Web Application Internationalization3 4 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend H\ ML's