This Presentation travels back in time for Production-ready JS.
in that process it covers
1. Global Scope Pollution
2. IIFE
3. Closure & Scope Chain
4. Bundles
5. Prototype Code for Webpack internals
Innovation dank DevOps (DevOpsCon Berlin 2015)Wooga
“You build it, you run it!” - Wenn Du als Entwickler weisst, dass Du Deine Software selbst betreiben musst, was bist bereit zu tun, um den späteren Betrieb zu vereinfach?
Bei Wooga haben Dutzende von Teams ihre eigene Antwort auf die Frage gesucht und dabei von den Erfahrungen der anderen Teams gelernt. Herausgekommen ist ein großes Experimentierfeld beim Betrieb von Web Services - und eine technologische Innovation, die uns innerhalb weniger Iterationen von einem simplen LAMP-Stack zu lastabhängig skalierenden stateful Servern auf Basis von Erlang oder Akka gebracht hat.
BlackHat EU 2012 - Zhenhua Liu - Breeding Sandworms: How To Fuzz Your Way Out...MindShare_kk
Adobe's interpretation of sandboxing is called Adobe Reader X Protected Mode. Inspired by Microsoft's Practical Windows Sandboxing techniques, it was introduced in July 2010. So far, it had been doing a good job at limiting the impact of exploitable bugs in Adobe Reader X, as escaping the sandbox after successful exploitation turned to be particularly challenging, and hasn't been witnessed in the wild, yet.
This paper exposes how we did just this: By leveraging some broker APIs, a policy flaw, and a little more, we were able to break free from Adobe's sandbox.
The particular vulnerability we used was patched by Adobe in September 2011 (CVE-2011-1353), as a result of our responsible disclosure action; yet, this demonstrates that Adobe's sandbox cannot be considered a panacea against security flaws exploitation in Adobe Reader X, and paves the way toward further interesting discoveries for security researchers.
Indeed, beyond this particular vulnerability, this paper dives deep into the sandbox implementation of Adobe Reader X, and debates ways to audit its broker APIs, which, to our minds, offer a major attack surface. In particular, the paper details how we configured an open-source fuzzing tool to audit them through the IPC Framework.
Symfony Live NYC 2014 - Rock Solid Deployment of Symfony AppsPablo Godel
Web applications are becoming increasingly more complex, so deployment is not just transferring files with FTP anymore. We will go over the different challenges and how to deploy our PHP applications effectively, safely and consistently with the latest tools and techniques. We will also look at tools that complement deployment with management, configuration and monitoring.
Being serverless and Swift... Is that allowed? Dev_Events
This document discusses Apache OpenWhisk, a serverless platform. It provides an overview of OpenWhisk and how it works, including its programming model using triggers, actions, rules and packages. It describes OpenWhisk's backend architecture using Docker containers and Kubernetes. It also discusses how OpenWhisk can be deployed on multiple clouds and IBM is working on improving its support for Kubernetes. Finally, it announces job openings and provides a link to a GitHub repository for an OpenWhisk CLI demo.
SymfonyCon Madrid 2014 - Rock Solid Deployment of Symfony AppsPablo Godel
Web applications are becoming increasingly more complex, so deployment is not just transferring files with FTP anymore. We will go over the different challenges and how to deploy our PHP applications effectively, safely and consistently with the latest tools and techniques. We will also look at tools that complement deployment with management, configuration and monitoring.
What if a video dev redesigned a serverless API?Jeremy Brown
The scale of live streaming large video files at billions of requests presents many challenges. The typical solutions for video delivery are built on planning to reducing complexity, increase capacity and provide many levels of resilience without blowing out cost.
Here I demonstrated how CDN, origin shield, static file principals could be applied to any API with an event driven architecture. The huge payoffs demonstrated in cost reduction and improved uptime in a recently migrated service
While the JIRA and Confluence OnDemand are similar in functionality to the installed versions, there are some important differences. Considerations include total cost comparison, Google apps integration, application response time, the migration process and pitfalls such as data encryption, plugin use, and integration with in-house authentication. Come learn how and why Healthonomy migrated to Atlassian OnDemand versions of JIRA, Confluence, and FishEye (SVN) after 2 years of self-hosting.
Innovation dank DevOps (DevOpsCon Berlin 2015)Wooga
“You build it, you run it!” - Wenn Du als Entwickler weisst, dass Du Deine Software selbst betreiben musst, was bist bereit zu tun, um den späteren Betrieb zu vereinfach?
Bei Wooga haben Dutzende von Teams ihre eigene Antwort auf die Frage gesucht und dabei von den Erfahrungen der anderen Teams gelernt. Herausgekommen ist ein großes Experimentierfeld beim Betrieb von Web Services - und eine technologische Innovation, die uns innerhalb weniger Iterationen von einem simplen LAMP-Stack zu lastabhängig skalierenden stateful Servern auf Basis von Erlang oder Akka gebracht hat.
BlackHat EU 2012 - Zhenhua Liu - Breeding Sandworms: How To Fuzz Your Way Out...MindShare_kk
Adobe's interpretation of sandboxing is called Adobe Reader X Protected Mode. Inspired by Microsoft's Practical Windows Sandboxing techniques, it was introduced in July 2010. So far, it had been doing a good job at limiting the impact of exploitable bugs in Adobe Reader X, as escaping the sandbox after successful exploitation turned to be particularly challenging, and hasn't been witnessed in the wild, yet.
This paper exposes how we did just this: By leveraging some broker APIs, a policy flaw, and a little more, we were able to break free from Adobe's sandbox.
The particular vulnerability we used was patched by Adobe in September 2011 (CVE-2011-1353), as a result of our responsible disclosure action; yet, this demonstrates that Adobe's sandbox cannot be considered a panacea against security flaws exploitation in Adobe Reader X, and paves the way toward further interesting discoveries for security researchers.
Indeed, beyond this particular vulnerability, this paper dives deep into the sandbox implementation of Adobe Reader X, and debates ways to audit its broker APIs, which, to our minds, offer a major attack surface. In particular, the paper details how we configured an open-source fuzzing tool to audit them through the IPC Framework.
Symfony Live NYC 2014 - Rock Solid Deployment of Symfony AppsPablo Godel
Web applications are becoming increasingly more complex, so deployment is not just transferring files with FTP anymore. We will go over the different challenges and how to deploy our PHP applications effectively, safely and consistently with the latest tools and techniques. We will also look at tools that complement deployment with management, configuration and monitoring.
Being serverless and Swift... Is that allowed? Dev_Events
This document discusses Apache OpenWhisk, a serverless platform. It provides an overview of OpenWhisk and how it works, including its programming model using triggers, actions, rules and packages. It describes OpenWhisk's backend architecture using Docker containers and Kubernetes. It also discusses how OpenWhisk can be deployed on multiple clouds and IBM is working on improving its support for Kubernetes. Finally, it announces job openings and provides a link to a GitHub repository for an OpenWhisk CLI demo.
SymfonyCon Madrid 2014 - Rock Solid Deployment of Symfony AppsPablo Godel
Web applications are becoming increasingly more complex, so deployment is not just transferring files with FTP anymore. We will go over the different challenges and how to deploy our PHP applications effectively, safely and consistently with the latest tools and techniques. We will also look at tools that complement deployment with management, configuration and monitoring.
What if a video dev redesigned a serverless API?Jeremy Brown
The scale of live streaming large video files at billions of requests presents many challenges. The typical solutions for video delivery are built on planning to reducing complexity, increase capacity and provide many levels of resilience without blowing out cost.
Here I demonstrated how CDN, origin shield, static file principals could be applied to any API with an event driven architecture. The huge payoffs demonstrated in cost reduction and improved uptime in a recently migrated service
While the JIRA and Confluence OnDemand are similar in functionality to the installed versions, there are some important differences. Considerations include total cost comparison, Google apps integration, application response time, the migration process and pitfalls such as data encryption, plugin use, and integration with in-house authentication. Come learn how and why Healthonomy migrated to Atlassian OnDemand versions of JIRA, Confluence, and FishEye (SVN) after 2 years of self-hosting.
1. The document discusses various Yahoo! products and services including YQL, BOSS, and YSlow.
2. YQL allows users to query and retrieve data from the web using SQL-like queries and returns structured data like JSON or XML.
3. BOSS is an open source search platform that allows users to build their own search services with features like rich structured data and supports over 5,000 free requests per day.
4. YSlow is a tool for improving web page performance by analyzing pages and identifying ways to reduce load times through techniques like reducing server response times and bandwidth usage.
1. The document discusses various Yahoo products and services for startups including YQL for querying data from the web, BOSS for search, and YSlow for improving website speed.
2. It promotes these tools as helping startups with key phases of developing a business from coming up with an idea, building the product, refining it, and achieving profitability.
3. The tools are described as open, free to use, and able to scale easily with millions of users while requiring no purchases from developers.
This document provides an overview of securing web applications with Spring Security 3. It begins with introductions to the speaker and Spring Security. It then outlines hands-on steps for securing a sample FBI X-Files web application with Spring Security, including setting up authentication, authorization for web resources and business methods, encryption, and more advanced topics. The document emphasizes that Spring Security provides a more flexible and adaptable approach to security than standard JEE security.
Join us for a live code demonstration of creating a PHP/Hack app and integrating it with Chatter via Force.com Canvas. We will provide a process and framework to rapidly prototype Canvas apps within minutes, rather than days or months. In the session, we'll show you how we built prototypes based on ideas from the Salesforce Ideas site such as real-time translation to voice memos. At the end of the session, we will provide the prototyping framework for download.
The document describes a "candy shell" security assessment performed by CandyShell Security on an example infrastructure. It identifies numerous common security problems found in the target infrastructure such as privileged accounts, weak passwords, lack of logging and monitoring. It then details how an attacker could potentially compromise various systems by exploiting these issues and gain escalating levels of access. Finally, it discusses some high-level solutions that could help strengthen security.
Is there a gem author around you? Did you meet any author of the gems
used? Did you contact with any author of the gems used on the
Internet?
Do you think that "the author is cool!", "the author is awesome!" or
"I respect the author!"? Do you want to be a gem author?
This talk doesn't describe about how to create a gem because it is
easy. "gem" is a package of Ruby library (, tool and so on) for easy
to install. This talk describes about developing a library that is gem
content.
This talk is based on my experience as a library developer. This talk
describes about how to write codes, how to write documents, release,
support and mental set for a better "library developer". I hope that
this talk is a trigger for increasing the number of better "library
developers".
10 practices that every developer needs to start right nowCaleb Jenkins
Gathered from over 15 years of development and consulting experience with some of the largest development companies in the world. These are the 10 practices that are the lowest hanging fruit and will also have the greatest impact on the way that you write and deliver software. Enjoy.
This presentation goes through the most popular JavaScript tools on the different browsers (Internet Explorer, Firefox, Safari and Chrome). It goes through popular JavaScript debugging tools, JavaScript verification tool (JSLint), and finally JavaScript minification tools.
Some updates & tweaks to the previous version. Also includes feedback code & slide.
BTW, Holly Ross was totally wearing the bear suit, I imagined it with my own eyes.
The document discusses the Scientific Filesystem (SCIF) specification for organizing scientific applications and software in a container-agnostic way. It provides an overview of SCIF goals and components, describes the SCIF recipe format for packaging applications, and demonstrates running a Snakemake workflow across multiple container technologies using SCIF.
This session will look deeper into the differences between using jBPM or Activiti in Alfresco. We’ll be showing how common concepts can be mapped from jBPM to Activiti’s BPMN 2.0 modeling. This session will provide you with a better view on what it takes to migrate your existing Alfresco jBPM-processes to Activiti, embracing the standard for business process modeling.
This is a talk I gave at IPC 2014 in Munich.
It's about how to build durable web apis based on the experience gained at Namshi while we were developing our SOA architecture
The document discusses the evolution of architecture at the gaming company Wooga. It began by using Ruby on Rails with a MySQL database, which worked for low user numbers but struggled as users grew. A second team then used Redis as the main database instead of MySQL for its speed. The teams combined approaches, migrating static data to MySQL and keeping dynamic data in Redis. This allowed scaling to millions of daily users. The architecture evolved further to make servers and databases stateless to improve reliability.
This document describes a vulnerability in Microsoft's Internet Information Services (IIS) web server software that allows directory traversal and execution of files with elevated privileges. The vulnerability is due to IIS not properly validating Unicode encodings, allowing attackers to bypass security mechanisms. The document demonstrates how an attacker could exploit this flaw to read and write files, gain administrator access, install a backdoor service, and fully compromise vulnerable Windows systems running IIS. It also notes how the attacker would patch the system before leaving to cover their tracks.
Heroku uses Heroku to build Heroku. It has over 5000 apps, 500+ releases and 200+ deploys per day across 21 teams. Teams use various tools like Github, Trello, Campfire. Quality is ensured by hiring for quality and culture, giving engineers time without deadlines. Small autonomous teams provide quality, ownership, productivity and agility. Heroku enables continuous deployment by having a defined API, parity across environments from dev to prod, and apps that do one thing well with straightforward setup and low barriers.
Continous Delivering a PHP applicationJavier López
The document discusses continuous delivery and building a continuous delivery pipeline. It begins with an overview of continuous delivery, describing the basic steps of commit, build, test, and deploy. It then covers the tools used to build the pipeline, including GitHub and Jenkins plugins. The document outlines the process for building the pipeline, including checking out code, installing dependencies, running tests, generating assets, and deploying artifacts. It also discusses splitting the process into separate jobs for testing deployment scripts and running automated tests. Finally, it covers benefits of continuous delivery such as increased release frequency, reduced risk, and releases becoming a non-event.
The document discusses reducing passive interruptions when coding. It notes that programmers can take 10-15 minutes to resume work after an interruption and lose their context and flow. Passive interruptions occur when waiting for feedback like test results or page loads. The document advocates for reducing these interruptions through techniques like instant code reloading, fast tests, and immediate feedback to allow programmers to stay in flow. It argues this is important for designing and verifying ideas quickly during development.
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)Fabien Potencier
This document provides an overview of the symfony framework presented by Fabien Potencier and Stefan Koopmanschap. It introduces symfony as an open-source PHP web framework built for professional websites and complex needs. It then demonstrates how to initialize a new symfony project, create modules and actions, implement templates and layouts, and integrate a database using Propel as the ORM.
1. The document discusses various Yahoo! products and services including YQL, BOSS, and YSlow.
2. YQL allows users to query and retrieve data from the web using SQL-like queries and returns structured data like JSON or XML.
3. BOSS is an open source search platform that allows users to build their own search services with features like rich structured data and supports over 5,000 free requests per day.
4. YSlow is a tool for improving web page performance by analyzing pages and identifying ways to reduce load times through techniques like reducing server response times and bandwidth usage.
1. The document discusses various Yahoo products and services for startups including YQL for querying data from the web, BOSS for search, and YSlow for improving website speed.
2. It promotes these tools as helping startups with key phases of developing a business from coming up with an idea, building the product, refining it, and achieving profitability.
3. The tools are described as open, free to use, and able to scale easily with millions of users while requiring no purchases from developers.
This document provides an overview of securing web applications with Spring Security 3. It begins with introductions to the speaker and Spring Security. It then outlines hands-on steps for securing a sample FBI X-Files web application with Spring Security, including setting up authentication, authorization for web resources and business methods, encryption, and more advanced topics. The document emphasizes that Spring Security provides a more flexible and adaptable approach to security than standard JEE security.
Join us for a live code demonstration of creating a PHP/Hack app and integrating it with Chatter via Force.com Canvas. We will provide a process and framework to rapidly prototype Canvas apps within minutes, rather than days or months. In the session, we'll show you how we built prototypes based on ideas from the Salesforce Ideas site such as real-time translation to voice memos. At the end of the session, we will provide the prototyping framework for download.
The document describes a "candy shell" security assessment performed by CandyShell Security on an example infrastructure. It identifies numerous common security problems found in the target infrastructure such as privileged accounts, weak passwords, lack of logging and monitoring. It then details how an attacker could potentially compromise various systems by exploiting these issues and gain escalating levels of access. Finally, it discusses some high-level solutions that could help strengthen security.
Is there a gem author around you? Did you meet any author of the gems
used? Did you contact with any author of the gems used on the
Internet?
Do you think that "the author is cool!", "the author is awesome!" or
"I respect the author!"? Do you want to be a gem author?
This talk doesn't describe about how to create a gem because it is
easy. "gem" is a package of Ruby library (, tool and so on) for easy
to install. This talk describes about developing a library that is gem
content.
This talk is based on my experience as a library developer. This talk
describes about how to write codes, how to write documents, release,
support and mental set for a better "library developer". I hope that
this talk is a trigger for increasing the number of better "library
developers".
10 practices that every developer needs to start right nowCaleb Jenkins
Gathered from over 15 years of development and consulting experience with some of the largest development companies in the world. These are the 10 practices that are the lowest hanging fruit and will also have the greatest impact on the way that you write and deliver software. Enjoy.
This presentation goes through the most popular JavaScript tools on the different browsers (Internet Explorer, Firefox, Safari and Chrome). It goes through popular JavaScript debugging tools, JavaScript verification tool (JSLint), and finally JavaScript minification tools.
Some updates & tweaks to the previous version. Also includes feedback code & slide.
BTW, Holly Ross was totally wearing the bear suit, I imagined it with my own eyes.
The document discusses the Scientific Filesystem (SCIF) specification for organizing scientific applications and software in a container-agnostic way. It provides an overview of SCIF goals and components, describes the SCIF recipe format for packaging applications, and demonstrates running a Snakemake workflow across multiple container technologies using SCIF.
This session will look deeper into the differences between using jBPM or Activiti in Alfresco. We’ll be showing how common concepts can be mapped from jBPM to Activiti’s BPMN 2.0 modeling. This session will provide you with a better view on what it takes to migrate your existing Alfresco jBPM-processes to Activiti, embracing the standard for business process modeling.
This is a talk I gave at IPC 2014 in Munich.
It's about how to build durable web apis based on the experience gained at Namshi while we were developing our SOA architecture
The document discusses the evolution of architecture at the gaming company Wooga. It began by using Ruby on Rails with a MySQL database, which worked for low user numbers but struggled as users grew. A second team then used Redis as the main database instead of MySQL for its speed. The teams combined approaches, migrating static data to MySQL and keeping dynamic data in Redis. This allowed scaling to millions of daily users. The architecture evolved further to make servers and databases stateless to improve reliability.
This document describes a vulnerability in Microsoft's Internet Information Services (IIS) web server software that allows directory traversal and execution of files with elevated privileges. The vulnerability is due to IIS not properly validating Unicode encodings, allowing attackers to bypass security mechanisms. The document demonstrates how an attacker could exploit this flaw to read and write files, gain administrator access, install a backdoor service, and fully compromise vulnerable Windows systems running IIS. It also notes how the attacker would patch the system before leaving to cover their tracks.
Heroku uses Heroku to build Heroku. It has over 5000 apps, 500+ releases and 200+ deploys per day across 21 teams. Teams use various tools like Github, Trello, Campfire. Quality is ensured by hiring for quality and culture, giving engineers time without deadlines. Small autonomous teams provide quality, ownership, productivity and agility. Heroku enables continuous deployment by having a defined API, parity across environments from dev to prod, and apps that do one thing well with straightforward setup and low barriers.
Continous Delivering a PHP applicationJavier López
The document discusses continuous delivery and building a continuous delivery pipeline. It begins with an overview of continuous delivery, describing the basic steps of commit, build, test, and deploy. It then covers the tools used to build the pipeline, including GitHub and Jenkins plugins. The document outlines the process for building the pipeline, including checking out code, installing dependencies, running tests, generating assets, and deploying artifacts. It also discusses splitting the process into separate jobs for testing deployment scripts and running automated tests. Finally, it covers benefits of continuous delivery such as increased release frequency, reduced risk, and releases becoming a non-event.
The document discusses reducing passive interruptions when coding. It notes that programmers can take 10-15 minutes to resume work after an interruption and lose their context and flow. Passive interruptions occur when waiting for feedback like test results or page loads. The document advocates for reducing these interruptions through techniques like instant code reloading, fast tests, and immediate feedback to allow programmers to stay in flow. It argues this is important for designing and verifying ideas quickly during development.
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)Fabien Potencier
This document provides an overview of the symfony framework presented by Fabien Potencier and Stefan Koopmanschap. It introduces symfony as an open-source PHP web framework built for professional websites and complex needs. It then demonstrates how to initialize a new symfony project, create modules and actions, implement templates and layouts, and integrate a database using Propel as the ORM.
Similar to Webpack Internals - Bundle - Production Ready JS (20)
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxEduSkills OECD
Iván Bornacelly, Policy Analyst at the OECD Centre for Skills, OECD, presents at the webinar 'Tackling job market gaps with a skills-first approach' on 12 June 2024
Walmart Business+ and Spark Good for Nonprofits.pdfTechSoup
"Learn about all the ways Walmart supports nonprofit organizations.
You will hear from Liz Willett, the Head of Nonprofits, and hear about what Walmart is doing to help nonprofits, including Walmart Business and Spark Good. Walmart Business+ is a new offer for nonprofits that offers discounts and also streamlines nonprofits order and expense tracking, saving time and money.
The webinar may also give some examples on how nonprofits can best leverage Walmart Business+.
The event will cover the following::
Walmart Business + (https://business.walmart.com/plus) is a new shopping experience for nonprofits, schools, and local business customers that connects an exclusive online shopping experience to stores. Benefits include free delivery and shipping, a 'Spend Analytics” feature, special discounts, deals and tax-exempt shopping.
Special TechSoup offer for a free 180 days membership, and up to $150 in discounts on eligible orders.
Spark Good (walmart.com/sparkgood) is a charitable platform that enables nonprofits to receive donations directly from customers and associates.
Answers about how you can do more with Walmart!"
Strategies for Effective Upskilling is a presentation by Chinwendu Peace in a Your Skill Boost Masterclass organisation by the Excellence Foundation for South Sudan on 08th and 09th June 2024 from 1 PM to 3 PM on each day.
A review of the growth of the Israel Genealogy Research Association Database Collection for the last 12 months. Our collection is now passed the 3 million mark and still growing. See which archives have contributed the most. See the different types of records we have, and which years have had records added. You can also see what we have for the future.
How to Setup Warehouse & Location in Odoo 17 InventoryCeline George
In this slide, we'll explore how to set up warehouses and locations in Odoo 17 Inventory. This will help us manage our stock effectively, track inventory levels, and streamline warehouse operations.
This presentation was provided by Steph Pollock of The American Psychological Association’s Journals Program, and Damita Snow, of The American Society of Civil Engineers (ASCE), for the initial session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session One: 'Setting Expectations: a DEIA Primer,' was held June 6, 2024.
Leveraging Generative AI to Drive Nonprofit InnovationTechSoup
In this webinar, participants learned how to utilize Generative AI to streamline operations and elevate member engagement. Amazon Web Service experts provided a customer specific use cases and dived into low/no-code tools that are quick and easy to deploy through Amazon Web Service (AWS.)
Hello Everyone, When we say production Ready JavaScript in 2020, the word that strike our mind is
Webpack
In this video we are not going to learn about Webpack, instead
We are going to build a basic bundler from scratch.In order to that, let travel two decades back
We are in 2000, hmmmm, what does it mean ? when we say production ready JavaScript in 2000.
File Size ….. Why ?Let address that with an example
Back then Web Application is Purely back end work, JavaScript was primarily used as code snippets.Here is an example , A HTML page,Which displays current data and time, when we click the button.
We developers want to keep the code clean by abstract the logic from HTML
How do we do that ?
Let move the logic from INLINE to Script Tag
We defined the logic in a function inside script tag
And we subscribed that function for button click
Cool. This looks clean, How about taking this logic to a separate file ?
Here we moved this logic to a separate file myscripts.js
Aha, Now we had to worry about our javaScript file Size.
Why ?
When our browser request for this file, loading time of this file depends on its size
Here our browser makes a request
Server responds back with a copy of this Javscript file.
Which is stored in
Browser Run time Memory.
So file Size matters in terms of download time and Client Memory.
Let see this with an example
Hers is our file, who size is
100 Bytes
To reduce our file size, lets reduce the length of our function name and variable name here
Here we replaced function name ‘displayDateAndTime’ with ‘f’
And variable name ‘date’ with ‘e’
Awesome, what else we can do here?
hmm….. lets remove white space and trailing spaces,
And check our file size again
Wow, we did it …We could bring down our file size to 75 bytes from 100 bytes.
This Minified File is our Production Ready Javscript
Did it end there ? No
Now
We want to abstract each logic to its respective file,
So our next issue is handling multiple files.
What we did here is, we combined both the files as a single file
And minified them
And now our production ready javaScript is Combined and Minified File
Awesome now we are in 2015, we successfully created production ready javaScript.
Wait, what happened now.
The JavaScript community too grown now
, new features started coming to Javscript language.Wait does that mean all our client machine needs to update to latest browser ?
Wont that be stupid, do I need to ask my grand parents to install latest browser?
Are there any other solution ? …….. Yes itLet start with an example to address this
Hers is an example with two new javaScript features
Default value for Arguments
New Syntax letThese two new feature will fail in my grandparents browser.
To fix that, we need to rewrite the same logic in old feature
we moved onlyTime argument as variable inside the function with default value fale
We replaced let with var.
This we call as transpillers
Babel is one of the most actively used tranpilers tools.
Now
We combine files
Into a single file
Traspile them to common version
And finally we minify them
Now our Production ready JavaScript is Combined, Transpilled and Minified
With more and more logic moving to JavaScript.Developers started facing their biggest nightmare,
Global Scope Pollution
Let me explain .
When our file gets executed by JavaScript engine
They start creating new property to window object. Wait …Why this would be problem ?Imagine, we have 10 files, and each file has 4 function,
Developers had to make sure, they have to create unique-Names for each variables
And if it’s a distributed team of developers, a team might end up overriding a function with the same name
This will be a nightmare to debug and track the problem.HmmmDo we have solution ? Yes of course,
IIFE … Pattern,
Wow
what is that ?
let say we have two files file1 – has getdate Definition
File2 – has displayDateTime definition
I want everyone to closely follow from here,
Hope everyone could see this faded abbreviation of IIFE, in the topI am going to reveal each word in this abbreviation with its respective step in code,
Let start with the first step
Wrap our code with an anonymous function .
Hmm
Why Anonymous function ?
When our javaScript engine execute this function definition , they don’t create new property in our window object., why ? because this function don’t have a name,
Wait wait, when there is no function name how are we going to invoke it,
hmm, you will get your answer in next step
Wrap our anonymous function with an expression.
Why ?
Remember we had to invoke this Anonymous function,What we had was function declaration ,
if we invoke them JS engine will throw you an syntax error,
So we have to convert the function Declaration to an Function Expression
There are several tricks to achieve that,
But we will go with brackets
From now on I am going to address each file as Function ExpressionNow that we understood the purpose of expression, lets utitlize it,
Let invoke in next step
There you go, you got the purpose and meaning of each word in IIFE Pattern;
Immediately invoked function ExpressionOk what does this achieve ? How does this solve our global pollution issue ?
When JS Engine execute: invoking Function Expression, your code inside the expression get called
So variable in our code will be defined inside the inner scope of this Anonymous function expression.
Not at the global scopeSo what we achieved here is separate inner scope with IIFE pattern;
Means Our JavaScript programs are split into separate scope on its own.
This is called module. … When we invoke a function expression we end up creating module.
This might make you think, When there are not defined in global Scope, how these Function Expressions are going to communicate ?
That’s what we are going to solve next
In our Example , Function Expression 2, calls the function getDate(), which will throw an error .Why ? 1. getDate is not defined in diaplyDateAndTime
2. If we check In its outer scope – which is an anonmynous function, - not defined there either
3. If we check in outer scope of anonmynous function which is the global scope, window object, not defined there too, so its throws an error
By the way This is called scope chain .
Function with scope chain is called Closure …Now we can say, getDate is called inside the closure of displayDateAndTime.
Now what we see here is a dependency issue,How do we solve this?
What we need here is a way to export variable or functions or constant outside a Module
And Import in the Consumer when needed.
In this Example
We need a way to export getDate out of function Expression 1
And import getDate function inside function expression 2.
In general What we propose here is , every function Expression should have the ability to export and importlet resolve that next.
let pass two arguments to each Function Expression,
exports to export its variable
Require to import variables
Let make exports to be an object which hold the variables , functions or constant that needs to be exposed
Since Export being an Object, inorder to consume this Object, we need a getter. Yes your guess is Right … require will be our getter function,
Which will give us the exports object
Here we go
Hmmm, What will be the basic requirement for a getter function
KEY ---- in our case, since file path are unique , we will make file Path as our key
Now Where does this require gets defined ?
Let call that as module Manger,Before Implementing Module Manger, let see the purpose of module manger
Say we have an Object
Whose key is file path
And its value being an Function Expression
Code inside that function expression will be you file
As minified version
Now for file 2
In file 3 , we Have three functions that are exported
createButton - which adds button to your page
createPara – which add Para Element to your page
addListener – which attaches an eventListener for Button Click Event
Now index.jsWhich exprts three function from file 3
And Invokes them
Our Purpose here is to convert this Object of Function Expressions into an Object of Exports
Now Implementation Lets start by creating an Anonymous FunctionWhy ? We don’t want to be part of global Scope This Function takes in Function Expression Object
And now we need ModuleExports Object to stored the exports returned by invoking respective Func Exp
Now we get to the meat, Definition of require
First step let check in module exports Object,
If it not there
Create an empty Object named exportsNow we need to populate the exports oBject for that fiepath
How?
Get the function Expression for that filePath
And Invoke them
This will populate the Exports Object
Now return that exports ObjectNow where and How do we invoke this require function, to populate ModuleExports Object
We need to call inside our Module MangerWe need a FilePath that needs to be the Starting point of our function Expressions Object
Lets name that as entryNow we need to Invoke this module ManagerHow ? …. Yes your guess is right
Wrap them with Expression
And We need to invoke them with our Function-Expression Object
And next we need an entry point
In our case, index.js fileLet's do a code walk through to understand better
In our case, index.js fileLet's do a code walk through to understand better
In our case, index.js fileLet's do a code walk through to understand better
In our case, index.js fileLet's do a code walk through to understand better
var moduleManger = (function (funcExpressions, entry) {
var moduleExports = {};
function require(id) {
var exports = moduleExports[id];
if(exports){
return exports;
}
exports = moduleExports[id] = {};
var funcExp = funcExpressions[id];
funcExp(exports, require);
return exports;
}
require(entry);
})
var fileAsFunExpressions = {
"./file1.js": (function(exports, require){
function f(){
return Date();
};
exports['getDate'] = f;
}),
"./file2.js": (function(exports, require){
var g = require("./file1.js").getDate;
function d(p){
p.innerHTML = g()
};
exports['displayDateTime'] = d;
}),
"./file3.js": (function(exports, require){
var d = require("./file2.js").displayDateTime;
var b = document.body;
var bt, t, p;
function cb(){
bt = document.createElement("button");
t = document.createTextNode("Display Time");
bt.appendChild(t);
b.appendChild(bt);
};
function cp(){
p = document.createElement("p");
b.appendChild(p);
};
function a(){
bt.addEventListener("click", ()=>d(p));
};
exports['createButton'] = cb;
exports['createPara'] = cp;
exports['addListener'] = a;
}),
"./index.js": (function(exports, require){
var me = require("./file3.js");
me.createButton();
me.createPara();
me.addListener();
})
}
moduleManger(fileAsFunExpressions, './index.js')