Salesforce Lightning Web Components - Open Source
•Download as PPTX, PDF•
0 likes•263 views
Fremont User Group August 2019 Meetup. Salesforce Lightning Web Components - Open Source #Salesforce #LWC #UserGroup #LWCOpenSource #OpenSource
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Salesforce Lightning Web Components - Open Source
Similar to Salesforce Lightning Web Components - Open Source (20)
More from Jayant Jindal
Recently uploaded
Recently uploaded (20)
Salesforce Lightning Web Components - Open Source
- 1. Lightning Web Components Open Source Trailhead DX 2019 - Announcement Jayant Jindal Fremont Salesforce User Group Lead https://www.linkedin.com/in/jayantjindal @jayantjindal
- 2. This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements. Forward-Looking Statement Statement under the Private Securities Litigation Reform Act of 1995
- 3. • Check-In :10 min. • Trailhead DX Global Gathering 2019 highlights : 5 min. • Global Gathering presentation (Hands-On Lightning Web Components Open Source): 40 min. • Icebreaker : 15 min. • Icebreaker Winner: 5 min. • Networking Reception: 30 min. Agenda
- 4. Trailhead DX Global Gathering 2019 highlights
- 5. Enhanced productivity Use web standards like ES6+, classes, modules, custom elements, and templates Built for performance More code executed by the browser instead of JavaScript abstractions for a blazing fast experience Compatible and easy to use Runs side-by-side with existing Lightning components and can be composed with clicks or code Introducing Lightning Web Components Generally Available Spring ‘19 (Feb) New programming model built on modern web standards
- 7. Fragmentation ● Proliferation of frameworks ● Components are not interoperable ● Skills are not transferable ● Resources are hard to find ● Framework abstractions are slow
- 8. W3C and ECMAScript Standardization ● ECMAScript 6,7,8,9 ● Classes ● Modules ● Promises ● Decorators ● Web components ● Custom elements ● Shadow DOM ● Templates and slots
- 11. Lightning Web Components • Modern Javascript framework • Before introduction of LWC, web has 3 layer: Browser, Application, JavaScript (Middle). To reduce middle framework dependence, LWC was introduced • Understand Pillars of HTML Web Components – Import, Template, Custom Element, Shadow DOM • LWC use Lightning Data Service (LDS)
- 12. Lightning Web Components – Open Source • Javascript framework which is open source • Lightning Web Components is built on the latest web standards, which is using a cutting-edge framework based on the latest patterns and best practices • Contribute and drive framework to community by sending PR (Pull Requests) to git (https://github.com/trailheadapps/lwc-recipes-oss) • Since Salesforce is part of W3C, ideas can be tabled by Salesforce to make your idea generic • Not required to learn multiple frameworks like: React, Angular • Compatible with multiple browsers e.g.: Chrome, IE11 • Example: Use LWC to build the employee-facing side of an application on Salesforce and React or Angular to build the customer engagement side of the application on Heroku or any other platform
- 13. Lightning Web Components – Open Source
- 14. Demo
- 15. Lightning Web Components – Open Source - Steps • Install node.js (and npm) from the node.js site -> Install git from the git-scm site if you don't have installed -> Clone the LWC Recipes OSS repository to your local computer -> Install Visual Studio Code (optional, but recommended) • lwc.dev • LWC Platform App
- 16. References
- 17. • LWC Trailhead: https://trailhead.salesforce.com/en/content/learn/projects/quick-start- lightning-web-components • LWC – Open Source: lwc.dev REFERENCES
- 18. Q & A
- 19. Salesforce Fremont User Group
Editor's Notes
- Lightning Web Components is a new programming model for building Lightning components. It leverages the web standards breakthroughs of the last five years, which means you can use more of the modern language of the web, build components that have blazing fast performance, and what you build can coexist and interoperate with the original Aura programming model.
- To understand why we are launching Lightning Web Components, it is helpful to go back a few years and take a look at the web stack in 2014. Back then, web standards only offered a limited foundation for the full stack that developers need to build large scale web applications: a rendering engine, standard elements, events, and a core language (ECMAScript 5). In addition to being rudimentary, that foundation had other shortcomings traceable to its roots as a page rendering platform, not an application execution platform. For example: Rendering wasn't optimized for continuous UI transformation Standard UI elements were scarce and the standard didn't support the creation of custom elements The core language lacked modern constructs to write large and modular enterprise-class apps at the client-side (modules, classes, promises, decorators, etc.) As it is often the case, the community and software vendors jumped in to fill the gaps. For example: Different libraries provided different language extensions to support modular and large-scale development: modules (AMD and CommonJS), promises, classes, and other general utilities. Different frameworks introduced different component model and html templating approaches. New techniques were developed to optimize rendering (for example, the virtual DOM in React, Ember, and Vue). In 2014, when we launched the Lightning Component framework along with the Aura programming model, we were part of that effort to push the web forward and enable large scale client-side application development on the web.
- Although these community and software vendor efforts made it possible to develop large scale client-side apps on the web, they also came with a number of challenges: Frameworks became the language. React, Angular, and the Lightning Component Framework are all JavaScript frameworks, but they provide such a high level of abstraction that they feel like different languages. As a result, skills were not transferable, and developers were hard to find and ramp up. Apps and components written with different frameworks are not interoperable. This fragmentation underscored the need for standardization.
- That is when the standard organization woke up: the last five years have seen an unprecedented level of innovation and standardization, mostly driven by the W3C/WHATWG and the ECMAScript Technical Committee (TC39) of which Salesforce is a member. The list of standards developed during the last five years includes: ECMAScript 2015 (6), 2016 (7), 2017 (8), 2018 (9) and beyond (adding classes, modules, promises, decorators, etc.) Web components Custom elements Templates and slots Shadow DOM
- As a result, the web stack looks very different today than it did five years ago, with its weight now heavily tilting towards standards. The core stack finally got the update it needed to become an application development platform in its own right. Many features that required frameworks now come standard: you no longer need a proprietary component model, proprietary language extensions, proprietary modules, etc. The standardization of the core stack is incredibly exciting and opens the door to a new breed of frameworks: frameworks whose major task is no longer to fill in the gaps in the core stack, but to provide a thin layer of specialized services on top of a standard stack that is now suitable for large scale app development.
- Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond. Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including: The Base Lightning Components, a set of over 150 UI components all built as custom elements. The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization. The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.
- Install node.js (and npm) from the node.js site -> Install git from the git-scm site if you don't have installed -> Clone the LWC Recipes OSS repository to your local computer -> Install Visual Studio Code (optional, but recommended) a. Show browser tab 1 (lwc.dev), b. Highlight quick start section on the left, c. Click Get Started button - We're starting on the homepage for Lightning Web Components Open Source. The page contains quick start and full installation instructions, as well as a detailed guide on the available capabilities. Let's take a look at the documentation first. Highlight left navigation bar - If you already have checked out the documentation of Lightning Web Components for developing on Salesforce the navigation should look familiar to you. It is exact the same framework as if you would develop on Salesforce - and with that all the skills that you learn when developing Lightning Web Components apply for both developing on Salesforce, and off Salesforce Click Installation -> LWC CLI -> Recipes - To get started with Lightning Web Components Open Source we will use two of the items that are listed in the installation section. The `lwc-create-app` tool and the Recipes sample application, which everyone can access on GitHub. Click on Octocat button in the top right corner - And speaking about GitHub - Lightning Web Components Open Source means that we all have access to the code. We can see what's going on with the framework, dig through the code, and open issues if we see areas for enhancements. Create your first LWC off platform app Show browser tab 1 (lwc.dev) - For getting started with Lightning Web Components Open Source we use the lwc-create-app tool. It creates a scaffolded project structure and a first simple app and more. As it's open source as well you can file any time feature requests to enhance the experience. a. Open terminal\/shell -> Enter npx lwc-create-app global-gathering-fremontug - Lets create now our first app. A few things are happening here on the screen: \u003ci\u003enpx\u003c\/i\u003e is a tool that runs the \u003ci\u003elwc-create-app\u003c\/i\u003e without actually installing it. This is the preferred way of creating new projects, as you'll always use the latest version. We're providing the name \u003ci\u003eglobal-gathering-fremontug\u003c\/i\u003e as parameter. This will create a new project with that name. walk through setup questions of lwc-create-app installation by just hitting enter all the time - There are a couple of questions that we answer during the installation process, like name of the app, GitHub user and repository, and so forth. We're accepting all the defaults. The installation now creates the folders and files, as well installs all the dependencies. This may take a minute or so. Open folder global-gathering in IDE\u003cbr\u003e- Highlight configuration files and folders in project - Let's take a look at the folder structure. For those who used the Trailhead Sample apps, or are familiar developing with frameworks like React or Angular will identify many known files. The lwc-create-tool scaffolds everything as needed, from formatting rules to linting to unit testing, so that you don't have to worry about setting up all the things on your own. Expand src folder\ -> Open index.html, highlight line 19 -> Open index.js - Thr src folder contains the entrypoint for the Lightning Web Components application. The index.html file contains standard HTML, like every other website. Note in line 19 - there is a custom element <my-app></my-app>. This is the initial web component. And when we look at the JavaScript it's really only about creating this first web component. Open modules folder -> Open app folder -> Highlight html, css, js files - In the modules folder you can see the my folder. This is the namespace of the webcomponents. Remember the custom element <my-app> in the HTML file? That naming is defined by the folder structure. It is similar to custom Lightning web components in Salesforce, whereas they are defined in the c namespace, like <c-my-component>. Whe we look at the contents of the app component you'll see the same files as you'd see when developing on Salesforce. The only missing part is the metadata definition file, as that's not needed. Open app.js -> Open app.html, highlight line 5 - When we look at the JavaScript code of the app component... well, not much going on there. That's because this web component is really only used for displaying things. When we look at the HTML markup we see that this web component contains another web component - <my-greeting and that in different flavors with a different parameter value. Now let's see that in action. Open terminal in global-gatherings folder -> Run npm run watch -> Open browser window on shown address - Within the terminal we run the npm run watch command. This uses a dependency of lwc-create-app, and starts a local development server. When we open the provided URL you'll see the app running locally. Open -> Comment line 5 in app.html -> Uncomment line 6 in app.html -> Save and switch to browser - Now how would the development process look like? Because we run locally, and have a development server running, we can make use of hot reloading. Which is provided out-of-the box. Let's change the <my-greeting> web component that's used. The new one will display the greeting message faster. Ok - ready? Save. And you see in the browser it's instantly refreshed. Quit watch command in terminal (ctrl+c usually)"] - Now let's quit the watch process, as we're going to use the port in the next demo, where we focus on a more complex structure.