 네. 자, 그럼. 네. 네. 네. 감사합니다. 감사합니다. 제 좋아하는 라이브로 제 기술, 프레임워드, 기술을 가지고 있습니다. 새로운 라이브로, 새로운 기술, 새로운 기술을 만드는 것에 대해 알아보겠습니다. 저는 이 기술을 실험할 수 있습니다. 저는 이 기술을 실험할 수 있습니다. 제 방식은 기술, 기술을 실험할 수 있습니다. 웹컴포넌스, 폴리멀, 미크로서베시스, 웹틱스, 도커러, PPMK execs server. 그래서 많은 기술이 있습니다. 그래서 저는 이 presentation을 모여 드릴 수 있습니다. 다른 방법을 제공할 수 있습니다. 하지만 만약에 웹컴포넌스에 적용할 수 있다면 웹컴포넌스에 적용할 수 있습니다. 그래서 웹컴포넌스에서 zalakaa 회사CG 반 Hahaha, sir. surface snaps are. Uncle. yes, as a member of wa. Kang. 액션에 대한 기능을 얻을 수 있는 기능을 가지고 이유를 위해 제작되고 있는 것입니다. 또한, 기능을 제작하는 것입니다. 기능을 제작하는 것은 우리의 유저의 기능을 제작할 수 있습니다. 그래서 그 기능이 대화에 effect in their work에서 더욱 비쥬는 의미입니다. 그래서 이 기능이 우리의 유저의 기능을 제작하는 이유를 사용하는 것입니다. Decider Placent. Because it's a business application, there can be a lot of changes for optimizations of the application, or often the application needs to comply some regulations, because they can change and we need to be flexible in that. We need to focus on it. 또한 오늘은 모바일 폰, 타블렛, 컴퓨터를 사용할 수 있습니다. 그래서 이 액션은 모든 곳에 가야 합니다. 그리고 모든 곳에서 액세서리를 사용할 수 있습니다. 의미는 말이죠. 예를 들어, 인터넷 액세서리를 사용하지 못한다면 정보가 될 때, 모든 이 액션에 대한 제출을 해야 합니다. 예를 들어, 제출에 대한 제출을 하는 많은 시간과 많은 사람들에게 도움이 될 것입니다. 제작을 할 필요는 없을 것입니다. 물론, 제작을 할 수 있다면 어떻게 제작을 할 수 있다면, 어떻게 제작을 할 수 있다면, 어떻게 제작을 할 수 있다면, 어떻게 아플리케이션을 제공할 수 있는지 볼 수 있을까요? 자, 이제 그냥 웹 클라잉을 발표할 것입니다 제 경험을 통해, 지금 지금 저는 Java developer입니다 아마 JSF, Google App Toolkit을 사용할 것입니다 하지만 저는 제거스크립에 관심이 있습니다. 하지만 저는 제거스크립이 아니고요. 제거스크립은 아주 좋은 기술이 있습니다. 많은 제거스크립이 있습니다. 제거스크립은 정말 좋은 기술이 있습니다. 예를 들어, 제거스크립은 매일 16분간 제거스크립에서 새로운 제거스크립이 있습니다. 저는 새로운 제거스크립이 있습니다. 제거스크립은 정말 시작돼요. 하지만 제거스크립은 저는 제거스크립에 관심을 주실 것입니다. 제가 demande는 그는 제거스크립의 웹 클라이언트에 대해 가장 맘에 들을 것입니다. 웹 클라이언트에 대해서 말해볼게요. 예를 들면, 제압사압과 구글압툴키를 사용하고 싶어요. 네. 제압사압을 사용하고 싶어요. 그래서 제압사압과 구글압툴키를 사용하고 싶어요. 네. 그래서 제압사압을 사용하고 싶어요. 네. 그래서 제압사압 잘 지내셨거든요. 저는 제압사압을 사용하지만 recorded for my simple web client with JavaScript. 하지만 제압사압을 사용하지는 않 desires at that is quite complicated for me. 하지만 고글압기� sip을 사용해서도 웹 컴퍼넌스는 아주 재미있어요. 웹 컴퍼넌스는 사실은 스타따르트입니다. 웹 컴퍼넌스는 4개의 스타따르트입니다. 스타따르트, html import, templates, and ShadowDome. 스타따르트는 스타따르트를 제공할 수 있습니다. 스타따르트는 스타따르트를 제공할 수 있습니다. 우리의 예를 들어, 우리의 투박이 있습니다. 이건 우리의 custom element입니다. 다음은 html import의 스펙시작을 하여, 우리의 html document을 다시 한 번에 제공할 수 있습니다. 다음은 templates의 스펙시작을 하여, html의 스펙시작을 하여, 브로서에 제공할 수 있습니다. fairly as a template we need to use the template we can just some how say it to the browser and it will interpret it and the last specification shadow DOM defines that everything was in an element stays in an element and then it will influence the surrounding the other elements outside of it outline of it if it's a person the HTML document itself won't won't change the behavior or to looking of our custom element For example, the paper toolbar Of course, in case we don't really intend to change it because the custom element can be 우리의 attribute를 설정할 수 있습니다. css-variables를 볼 수 있습니다. 하지만 모든 것들을 볼 수 있습니다. 예를 들면, 이건 paper toolbar입니다. 어떻게 볼 수 있는지 볼 수 있습니다. 여기가 메뉴, 타이틀, 다른 버튼이 있습니다. But all the logic or JavaScript CSS tors it's inside of the paper turbo. Currently we have more than 1600 of replicatories of web components on the page CustomerElements.io. Not every web component is a visual component can be a component for offline mode. 웹 브로스스의 크롬과 오페라가 있습니다. 다른 브로서는 우리의 폴리필을 사용하기도 합니다. 폴리필은 젤리스크립 라이벌입니다. 이 브로서에 대한 응원을 합니다. 사실 모든 브로서는 폴리필을 응원합니다. 웹콤폴렌스에 대한 응원을 시작합니다. 폴리필을 발표할 수 있습니다. 폴리필은 몇 개가 되어있습니다. 모든 브로서에 대한 응원을 합니다. 이 브로서에 대한 응원을 합니다. 우리의 폴리필을 사용할 수 있습니다. 이 브로서는 폴리필의 카텔럭에 대한 응원을 합니다. 이 브로서는 폴리필을 사용할 수 있습니다. 여기가 있습니다. 여기가 있습니다. 폴리필을 사용할 수 있습니다. 이 브로서는 여기가 있습니다. 이 브로서는ocused-design Lanka пер Seoul Mogul 이 브로서는 여기가 있습니다. 이 브로서의 연박을 전자�erved 보석 내부 영접을 예planと 해서 차�droj engine가 Caitanya어�she sales 이 브로서는 그리고 제가 finding interesting is Every element has its own repository So we can find easily the implementation of the element It's always called the element.html And there can be also other elements of course So when we look at the implementation We can see the definition of the element Here we have a template How the element is defined As I said, the template is just defined There is some DOM element But please don't interpret it It's just a template So it's interpreted when we actually use the element Here in the template we have input Just an HTML element A lot of attributes we can set there That's all for now And the element is tested There are tests, unit tests for the element And our demo application So we can look at the demo page Be inspired by that The nice thing about putting polymers as our own repositories Is that there are many contributors So even if you aren't a JavaScript developer like me You can file issues if you encounter any And put it there So let's go back to the presentation So what's actually Polymer? Polymer is just a library Which helps us to develop our own custom Polymer elements What I like about Polymer Is that we can define our elements declaratively So there is just a little JavaScript code That we need The important part is the template Which we have seen in the paper input And the template just defines How the element should be generated So in our example of user detail We want there the name of the user His email And the element And in the properties We set there the attributes User attribute What we define there It's a type of object And we can set there also the default value For example Empty user Next to properties We can define the methods Which we can call on the element And etc And there we see the usage of our custom element Very simple user detail We set there our user For example from a list And that's all Okay We've seen that paper elements Particular paper elements Use material design Material design is just another specification It defines visual motion and interaction design Why I like it Is that it shows us Like we get from it The unified experience Cross devices and platforms So whenever we use the elements Our mobile phones or browser It will change the behavior of the elements How it will look And so on Here in the web page Material palette It's a very nice simple application Where you just select your primary color And secondary color And quickly you can see Quickly we can see How our application could look And then we can decide Okay, this is what we want We can download the Polymer CSS It's a part of code Which we just can copy To our application And it will change the looking So now I would like to show you My technology demo It's a vacation planner As I said It uses the web components Polymer elements Or my custom elements Et cetera I just want to show you How we can operate with the applications And have the understanding Then we would go into details How it was implemented Okay, the application is running here We see we have two users Well, the Ernest So user and Sarak is his manager So as an Ernest We want to apply a leaf Apply for a leaf And there we Put there our ID Ernest wants to go to Prague Then See how the page is changing The animation And we want to go there From Monday To Friday We apply the leaf It's being submitted and accepted Great Here we should see our requests Here is the request The Ernest It's our own request The status is waiting Now we can look at Why it's not approved Immediately So here we see That it's waiting for the approval of manager Great There will be some more tasks to do But we will change To the manager, Sarak Here we will see The waiting vacation request We will select On the request We see Ernest requested For the vacation To go to Prague Okay, here from there We will approve it It's completed And here we see The template vacations So everybody who is Under manager Will be here Here the status is approved And the process is finished That's it Notice that everything you see Is actually a web component There are web components inside Web components etc Everything is actually Dynamically generated There is no hardcoded form For example To apply a leaf When I would want to I would just add a field Somewhere else I will show you in a moment So the same applies to the tables They are also generated I just select Which columns I want to show That's all So Let's go back to the presentation Okay The first thing we wanted to do Was to fill a form To apply for a leaf So I modeled it Actually Business Central Informodular I just Put there all the fields Inside the labels Which fields are required Change the order etc So whenever I want I can add some fields I can change How the form would look like And so The next thing Very important thing Is actually the business logic For our application I want it to be flexible It's a business application We expect a lot of changes And we wanted to Have the business logic As transparent as possible So everybody who is involved Would understand What's happening in our application When anybody needs to change their thing They can just change the process In a process We see two parts The top part is actually Assigned to the user The top part is for the manager At the start of the process We just put there The data from our form Because we set there Only the user We get also the manager So we call Remote Web Service To get the manager of the user And next Next service Next call Is to persist Our vacation request Into a database So there is another call To our web service After that We want the request To be approved by manager So we wait For input And then Based on the decision Of the manager There is a gateway Where it's approved We set the status Of the request as approved Otherwise as denied And then the process ends Yeah One last thing The process Uses BPM annotation Business Process Modeling It's a standard notation For modeling business processes So You might have already seen it somewhere Just not define Only how We should model it It also defines how Every element of the process Behalves This is a project lifecycle As I mentioned I used something Business Central Business Process Management Platform Where You can create Your new project In this project You can set You can add your business assets Whether it's the process Our business logic Our forms Other assets like Business rules etc Then we will decide We want to build Our project It will create something What's called a KGR Knowledge Java Archive Which contains All our business assets Contains process forms etc Then it will deploy Our KGR Knowledge Java Archive into May 1 Repository This cycle can continue We can modify our assets Change the process Change the forms Things We have our Knowledge Java Archive With our assets Inside of our May 1 Repository We want to execute them We want to execute the process We want to start it The optimal way to do it Is using BPMK Execution Server Which is just designed For running business processes For We have the process services Task services Rule services So we have a lot A lot of services We can use To start a process To get a list of tasks To get a list of running Processes etc We can also add Our own services If we need to All those services Are available via REST API Also JMS But we will use Just only the REST API The only thing to make it working Is to create a container This container Will have just a name It will link To our Knowledge Java Archive The archive which contains And that's it Then we will have Everything available To run This is the overall architecture We have The Vacation Planner Web Application And the Web Application Actually uses The Web Components Polymer Elements And our Custom Web Components Key Web Components And Vacation Web Components Key Web Components Communicate To our BPMK Execution Server To start a process To get a list of tasks To get a list of running processes And so on So we encapsulate all the logic Into these elements Into these Web Components The next part Vacation Web Components Those are components Which partly Use Key Web Components So we have Web Components Inside We have Key Web Components Inside Vacation Web Components Also We have components To communicate to user management Web service To get a list of users As we have seen on the front page On the home page Also we have components To communicate to Vacation Web Service To get a list of Approved Vacations For example And these Web Services Persist data to MongoDB The Query data there To And BPMK Execution Server Microservices and MongoDB They are all running in Docker So those are the containers Which we can Horizontally scale Okay I was mentioning our custom Key Polymer elements I developed a few of them Just to see how How the custom elements can be implemented So I was asking a question What do we want to see On our Web page How we want to Use it So for example The basic thing Is to show just a form And to send it To the server So I was asking What do we need To just show the form And start a process Of course it's the requester It's the user who wants to start a process It's the container It's the name of the container Thanks to Our Knowledge Java Archive Which contains all the processes Forms etc And because the Knowledge Java Archive Can contain more processes Than one We We set there also a process ID To identify Which process we want to start And also I want to set the name of the button So I put it there too But only Definition we need To actually generate a form Dynamically I didn't say there Anything about forms And And it also Will generate a button Button at play Which will start a process When we click on it There is no javascript There is Nothing we need to Set Everything gets inside Right The other example Get task list is even simpler I just wanted to show List of tasks For a particular manager And Not just any task I want to show a list Of tasks To approve a vacation So I put there Task name That's not all I would In the content of the element I would select all the columns Which I want to show in my table Of the task list For the user And that's all Again There is no javascript All the javascript to Get a list of tasks A list of variables Etc It's everything inside So now I want to show You The most useful Web component I believe Is Good It's ironAgex IronAgex Is a web component Which you can use As a API The only thing You need to define The URL Parameters How you would handle The response When it's json json On response To handle the response I can use the content For example To set some template And that's all Of course I can set other attributes For example A body Here we see an example of that Content type Whether we send json xml Or other things Notice There is a boolean attribute auto It means that And URL Or parameters It will send the request again So it's automatically Sending request based on changes When we Don't want to send it automatically We can use A method called Generate request It will send a request On demand So now What is the terrace on the response What does it mean Is that We wait for an event Event called Response And to handle it We always are there on Dash Okay So in the source code We can load How it's actually implemented How we can fire our own Event Here we have Handle a response Here We fire a new event Response We send The content For the event Whether it will bubble to the parent To the parent or not That's all Very simple code As me, as a Java developer It's very simple I can use most of the operations Like Java And Only thing I had to learn Was just the structure How would I Develop my custom Custom elements Do we have time? If you want to start using Polymer and web components I recommend you to start with Polymer starter kit For application I use it even for my demo That has already some content So you will just change Your menu, the content Of the pages and so on Also seat element Is a good example of how to Develop your custom element So you can start always With it The presentations Of the first Polymer Summit Are available if you want to go into details Like For example Accessibility Then there is documentation Of course The demo application The source code of the demo application Where you can find the microservices Using quartex Where you can find the processes The Polymer application and so on So since we are getting to the end I want to stress One Three important things Web components are standard So use it You will get a lot of benefits from it Be flexible in adapting To changes Show real usages Of your common REST API operations And become independent On any JavaScript library Because they evolve very quickly Thank you If you have any questions Okay Do you know how Search engine optimization Search engine optimization I don't know It's my first application Using web components in Polymer I was experimenting I don't know how it was But because Google use it A lot It changes their own Web applications For example YouTube Gaming YouTube uses Polymer So I believe There has to be some support For search engines I run there Simple Python Python HTTP server You can use any server You want to It doesn't matter It's only a JavaScript It runs It's a dynamic web page Because you direct the JavaScript Did you answer It's on client Everything is on client The web client The custom elements BPMK server Yeah BPMK server Is part of the product BPM server It's also available As a community project On jbpm.org So you can download it Yeah There exist customers BPM server In production Yeah There can be hundreds Running processes Or even more I'm not sure exactly But since it's used in production You can scale it You can scale the key execution Server or business entral Which can run business processes As well So I don't know That Any other question All right, so thank you Yeah I used it Because I like it And because I used I used JSON Of course It came to me as the easiest solution So it's not I don't know I don't know Yeah I don't know I don't know I don't know I don't know BPM is Also an independent project Or a real company Yeah It's an independent project Polymer It's not the only implementation How to create The web components Yeah, of course Web components are standard And Polymer is one way to create Another example X-Tex It's the same It's the same It's the same It was new But I've always wanted It's the same It's the same It's the same It's the same It's the same It's the same