Logo TIB AV-Portal Logo TIB AV-Portal

Faster, smaller, better: Compiling your application together with OpenLayers 3

Video in TIB AV-Portal: Faster, smaller, better: Compiling your application together with OpenLayers 3

Formal Metadata

Faster, smaller, better: Compiling your application together with OpenLayers 3
Title of Series
Part Number
Number of Parts
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
OpenLayers 3 uses the Closure Compiler to compile JavaScript to better JavaScript. Developed by Google, the Closure Compiler is more than just a code minifier. Variable and function names are not only shortened, based on static code analysis a number of optimizations are applied, like dead-code removal or function inlining. Of special interest is the type checking and a syntax check which allows to detect errors at an early stage which otherwise would only emerge during runtime. You can use OpenLayers 3 without getting in touch with the Closure Compiler. But once you compile your application together with OpenLayers, you will benefit from a few interesting advantages. First, because the compiler removes unused code, only that part of OpenLayers that is actually used in your application, will be included in the build. Because only a fraction of the extensive functionality of OpenLayer is often required, the build size can be reduced considerably which results in faster loading times. The compilation of your application together with OpenLayers also makes it easier to extend OpenLayers with custom components. Notably, the application code is also analyzed and checked by the Closure Compiler, so that you benefit for example from the type checking. This talk introduces the Closure Compiler, which offers a robust platform for the development of complex web-mapping applications with OpenLayers. Advantages, special characteristics and experiences from own projects will be presented. Tobias Sauerwein (Camptocamp) Beraudo Guillaume (Camptocamp)
Keywords Camptocamp
Context code entropy workstation ones compiler Code information graphical user interface Meeting/Interview different closures compilers box framework model errors libraries script overlay mapping namespacing Development digital feedback bits Continuation variables Types processes static uniformity compilers Type Safety website write source functionality Open Source analysis student versions Google testing implementation CAMS modules domain Java consultant code coma applications Software environment case ICC life libraries
Actions time Contracts argument heads Code ENUM mathematics Types hypermedia compilers model pressure injectives namespacing variables means compilers interfaces Right Free spacetime point functionality Numbers print 3rd distances events Kraft goods prototype Hardware-in-the-loop simulation man data types Mobile App addition regional JIT information key Prisoner's Dilemma experts lines Symbolic algebraic SoC ICC objects
complex Actions integrators code entropy attitudes Java time unit sheaf sets compiler argument open subsets part information image mathematics Types closures compilers extent libraries classes systems predictive script relation Arm generate CLI Blocks namespacing Development files The list Axonometrie instance variables completion several Types category data management means processes static compilers Render refactoring configuration Right sum procedure Free source point Slides functionality Numbers wrappers files labor Integrationen Continuation declarative Crowdsourcing period operations string order level environment mazes configuration structure data types mobile Mobile App information server melt projects interactive code variance lines applications system call Symbolic optics iterations wireless family libraries
Slides information 3rd compiler lines open subsets energy mathematics configuration closures website modularity model band Results conditions
comparison time bits part applications energy goods Meeting/Interview configuration compilers website CAMS platforms libraries
Computer animation
Bob I introduced to the US
and they will talk about compiling application together with open place 3 top 5
minus to used human sites and again to talk about 2 it's almost as if we want to which makes the development of larger telescope applications the more saying we work for a company called to together come on and you a European companies we do a lot of work with the lamps and cesium and many other open source software that you're bald this conference we are hiring right now so if you're interested please check for what's going on there 3 ways that you can use of all layers the simplest ones that use the full with uniform the ambient package or philosophy and this so includes the full functionality of layers elective seen before Polaris supports 3 different from supports many different data for and so you get a lot of stuff that's not the case in the text of needs for this functionality so it makes sense to use a custom built in a custom-built Apple map of OpenStreetMap life of that you Jason where I have some styling and then you build your overlayers fully including all this stuff we are going to talk about the way and that is required to compile your application together with you also only get that somewhat where's that you actually needs but it also benefited from a few other advantages when was the 1st the 1st version of John Stuart was developed probably only 10 days it was only used for small scripts for example station knowledge to some basic animation no there's the using it to be there to build large of applications but develop green a small strip is very different from writing because applications Google has some source if you're writing being exhausted applications you have to ask yourself how you structure applications and namespaces modules so it's it's not a digit codes and to work in teams outside makes sense to have a clear API of advanced users while trying to context also it might set of sense to use the fact checking we will talk about this a bit more later and then static checking so that you not only discovering box during environment but also due to comply and another very important topic is testing testing that we will not cover just but you will have some experiences in developing large applications for the development of applications like domain who dogs on maps and using the so called because it will it's a collection of tools and frameworks that make to develop but that's easier to the most important role sister goes through before the compiler intergroup library the little some of trajectories and as we have before the novel as we got rid of this library but student used circular compiler so you can use it to look for the compiler developed using the library and can use the library without a compiler or the compilers actually just about and that's what it was going to tell you I will do to you but the combined and would have embarrass this is due to pass useful code and then mean and combine into a better a better command In this process it would do anything to do with the taking that you could uh didn't have a syntax error or that there is a variable you we variables using are really exist and this is afterward to overriding just like here that you think and would interest so the chief is so both of those you know the the the type of the objects and if you use a diverse uh incorrectly between save and combined and the he does support for advanced by it is that you can write the code in the model uh ingested and the and legislature and then it it will be combined in to some good that friends everywhere um independent as much as you get a lot of looking that at the station like could like and that that could be removal and we will have to be so and here is an example of that that could removal and 99 and in this example we just say hello and until it gets occurred at the same thing in much who international OK so here the 1st line so that their feedback the 1st language is a tube to create
a namespace the space that is an object into which we are going to store our functions then there are 3 functions the 1st 1 is the print all function but right hello to the consumer there is a one-to-one function that is in the news that is if there is a mention this my function would they get to the print head of the last line is a loud calling them into the main function so now can get what we do as a combined entity so the way we generate occurred between and i these and he would figure out that there is 1 function that is used and it was really good for you and it will figure out uh and uh as the model of gold solution and you can simplify the and that it would be United it's good legislation confined see on are very early that very ordered that but there is no less which is and so this is going and exemplary these remaining going in this example we say hello to events and uh so uh the starts the same with the declared as the creation of the action in space is then there is that the function had 0 but takes 1 parameter but is a person and if we let us say hello to these persons there is that is the main function and inside these men function we have a person variable but is in the and the logic and that that we have the 1st name and last name we are going to pass these variables and to move to the to the to the function and we have positive so the to the function the last line is just a running it as an invention so what we do it with a combined what is interesting is that the 1st line yeah so that the things that I the 1st 1 is each we rename the look at the very general we know that this is local and a person that has been shortened to just 8 but the there is more it will also I mean if I had assumed that subjects keys so the keys were 1st names and he became just a it was the last man and indeed it is began to be any quite question but in practice knowing that this is used in a different function is not just a local this is quite impressive way too many fight and but it's not always do what you want and you come that commits both imagine you have an HTML with the button and you want to react undertaking event by cooling something in your domestic then you and can you would like to prevent that uh do something is renamed or even removed from your so actually is quite easy you just need to annotate your function we've expert annotation and then what a compiler we do is to um the creates a function so that the greater do function that something tension between delay into the media find a function to have now let's talk more about an addition annotation that are useful for price so here we can see and that point to how you would define a point so you are 1st attention and then you have tomatoes on the on the bond so you might but it's a concerto with the constant of annotation and and when you create a point and you can pass uh to the free number of parameters so you know that's the number and then these parameters the 1st 1 8 and line and required that the last 1 is optional and what information these prisons here in these documentation uh that is compatible with change every time you instantiate points it was shown that you do we got and if you don't have right and usually now we have limited on the other points so in the founder of the prototype we simply as a distance to a function and uh so the function that we take this point parameters and it is required the furniture is required and that is required to be the new this is the meaning of the of the symbol when you bastard a point character that you you are a contract is that it regions and you know that it would always return and and the physical attraction between the you know those confrontations enlarged quite to the market through
a system of attitudes um for us the type of languages like Java or C + + the compiler action is applied to mental management but just to be interviewed there doesn't need them so you would use this types for you and for the colleagues that have to work with the because a lot of time span understanding approach let's take this example 3 lines of code you have a list entries that you iterate and for each entry in the list call to data relative so what does this code do um you know what the speaker of dust we have to know what this function relative to us so we can track codes for all the data collected it just 1 iteration if you not there hundreds so to know about the data must have to find out what type there's so you have to know what type it is often do you have to know what type of entries in this example you don't really know where this comes from what it would be a function parameter so you have to check all calls places of this function to find out what it's you realize that's a lot of work just to find out what these 3 lines of code idea if you are using types and just to the or whatever should constants rejected the classes the remember that the class that result 3 spent slides ago we have this this class point and now we are creating an instance of the list of coordinates about the compiler complains that spot expecting all right it's it's it's it's expecting them to different variables so it's saying that it wants to arguments and at least 3 but it received the right set of numbers what you also see in this example we don't hear it's saying that only 95 per cent of our code of this means that the whole application has to be typed if you don't provide types the compiler try to figure out out the type and if not using any time also it very useful this the integration so you get the documentation and you can instantly jump to the declaration of function and to see what arguments you have to provide to to call the fossils and you get for completion and also refractoriness are easily fall more easily possible but the if you want to use an external libraries and there are 2 possibilities you go to the library also is combine all supports optical wireless like this for layers then you can compile it together with the library or you the library the external libraries like you wouldn't you wouldn't normally what you would do normally have structure for the external libraries and then you have to compile application but this requires an extensive let's say you're using all of these um the compiler doesn't know that's it's complaining what's this parable out so you have to tell the compiler if you want to use leaflets I have just role of justice function which expects string for that matter and something like this that and then we combine understands this girl and who you can provide that you don't always have to write this instance false yourself that makes sense for a while low for many popular letters OK OK so you can do leave with external and then but what can you do we with but then there's is a good point is that the operator is the use of political buyer so that you can you can combine your application that together with the here is a simple is a simple example of an application combined with operators um uh the frequency of use and that part of the 1st block the the 1st block here is about to dependency really just we have the 1st line is the creation of the namespace within the namespace and we export its fall for using from from outside and we say that we require uh some sometimes the jaws of it from all the this is because loss and and then it is the nominal coding we've we've operators who takes the management of trauma unit is then shared with some of them configuration so you would do we pass the sources within the OpenStreetMap and OK so here is what could you would write and that's what you is a configuration file eventually in order to be able to comply to it may seem to be complexity but actually it's not complex at all you have only section here inside which you put the full of 5 that you need for compilation the 1st line is the full size or the full size of operators the idea
of some of them addictions fight for 4 but in the end here is is that the arms of the fire from your application you found application that now when you allow them to combine you configure out uh we even you and treatment and this is simply the name space that we we created before and that if we use some some extent and member of the labor properties we need to do is to least in the extent that we are really that we're relying then there is a section where you can add more stuff like you shouldn't use them renderer and you mentioned the wager renderer you can set some some some defined as I don't want these and real movies have you would want to use the itemset completion because this way against and was benefits from the combined and the last line is simply the whatever that makes good combined by the compiler of 1890 we've we've overfeeding signed the really is a rather simple run and the anonymous referee the what is now you have written look at you have written the configuration 5 and of course to we need to combine this just fine and but when you need it and the need to think about this because there is and and and and ications medical literature you that will handle and downloading and and everything for you but the interaction with that was compiler so so when you want to urge you write the prediction of script you will use the symbol line of course um that was originally with the bit of that you by the configuration file and the other food is simply at the GS but his semifinal JavaScript everything is not OK good for prediction and our for development uh the country to uh uh project contains a development set so if you are going to be the set of targets and the configuration file you will be able to come to changes in the good engines in the presence of refreshing you're you're uh you brother and you have immediate it change of of what which change you don't need to have of the process of combining so to sum of white combined we've opened the and yes of course you you gain a lot about is the size of the as the generators of the mean you find JavaScript's because of all of the the continuation of that we saw before so you only pay for what you reuse of open and the good but is that you can write to maintain and maintain and and and and and and and the code is you just write this thing and then between because what you need and it's easier to extend cooperation 10 years to get all the benefits and at every level uh the type checking it is this really make your application will be and then you get at compile-time information about each 1 not OK so this is the a size and the brain and you should take care just operators and combining uh you get to me find a size of 140 and in the like and they issue and combined with the system is a simple application we saw before uh we've got to give a we've we looked at me years to get something more he said is 1 of the design of of opening and you get when you know that the variance is already very small yeah so there are several projects method that uses Google because it combines the first one being a mean operator itself and then there are many over overseas so for example the use of open innovation procedure is an integration of library and fall all property free and caesium but presenting the next talk just after the break uh there is that and you want use the boat having property underground there 2 joke joke about or in the physical example reported that use the images in you and on the right and the users we still use your book about I make use of the ball that was presented by Bayesian yesterday uh there are some some applications have to that the mobility for example and that is the last 1 is quite interesting it's a small project uh varies from project that you everything about the set up so it's interesting to get started and so on
it's a bit like and there's nothing here is raised in have been skewed data results weaving uh you you get because and then the very important so you can have more information to get started on the opening of the web sites there is totally and is the 1st week and then there are a lot of the condition what the future is our ongoing change to go on and the left it sees ethics and then there's um 2 people want to use and to write the book with it must be and that and music is a transparent and an so this is the this is important and this uh we we really been it is uh using the graphical model for this amount of energy would be using typescript 59 so so you can find that there is a this line that under and the and you can contact us on on the temperature the will be sent to the uh evocation few
thank you 1 maybe to fast questions the no questions the yes you well you know I have I have already tried to compiling with advanced compile option and it took about 1 month to even learn how to use it in because probably it was because I was stupid so how long the duty to like learn how to comply with the
advanced compiler option I have to admit it's a bit faster than take some time but I think it's a
good question because Europe really get there will was platform to the develop bigger applications you can read recommend to draw that of this website and there's also work it's parking lot of the library but you can go to the sponsors of the part of what because a comparison do just like you this is the thing that is not thought to get started that you can the issue for a lot of some something that the energies it's easy to start and this meant that you need to do to find that this a good to go at this time maybe you can meet the guys the book 1 more
everybody happy OK thank you think you intend