Parcel – your next web application bundler? by Janis Koselevs at FrontCon 2019

•Als PPTX, PDF herunterladen•

0 gefällt mir•137 views

When I wanted to compare which bundler to use in my next small project – Webpack or Rollup, I came across a new kid on the block – Parcel. At first I was like – OMG! Another one! Why?! And then I was like – Interesting… and you wouldn’t believe what happened next!

Technologie

PARCEL
your next web application bundler?
Janis Koselevs, FrontCon 2019

Who am I?
● Husband and father
● Trained UX and Design Thinking evangelist and practitioner
● Passionate Front-end developer for 15+ years
● 7+ years growing and leading FED specialty in Accenture Latvia (taking care of
~100 FE developers)
● Lately don’t code so much daily, unfortunately...

And you know these (web application/module bundlers)

Beef I have with existing bundlers
● Modern bundlers treat JS as first class citizen and CSS and other assets as second
class citizens…
● Usually JS is main entry point
● Feels complex and over engineered for simple sites/apps - shooting flies with
cannon
○ Learning curve
○ Configuration, configuration, configuration…
● I think I have a mild case of OCD and “perfection” - I like things in particular
order or from similar/same philosophy so they play nicely together by default and
always looking for better solution

What is parcel?
“Blazing fast, zero configuration web application
bundler”
- https://parceljs.org/

Why parcel is great? 1/2
● Blazing fast bundle times
○ Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast
rebuilds even after a restart.
● Bundle all your assets
○ Parcel has out of the box support for JS, CSS, HTML, file assets, and more - no plugins needed.
● Automatic transforms
○ Code is automatically transformed using Babel, PostCSS, and PostHTML when needed - even
node_modules

Why parcel is great? 2/2
● Zero config code splitting
○ Using the dynamic import() syntax, Parcel splits your output bundles so you only load what is
needed on initial load.
● Hot module replacement
○ Parcel automatically updates modules in the browser as you make changes during development, no
configuration needed.
● Friendly error logging
○ Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the
problem.

Install parcel
npm install -g parcel-bundler

Create entry index.html file
<html>
<header>
<link rel="stylesheet" href="./style.css">
</header>
<body>
<script src="./index.js"></script>
</body>
</html>

Create your script.js file
console.log(‘hello parcel!’)

Create your style.css file
.main {
background: yellow;
color: black;
}

Open your browser
http://localhost:1234/

Why I think parcel is great
● Works out of the box - zero / minimal config
● Fast
● Watch mode & built in web server
● Index.html as main entry point
● Treats all assets as first class citizens
● Great for beginners
● Great for simple / small projects (not only!)
● Great for websites/templates

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to Web Design for Literary Theorists I: Introduction to HTML (v....

Patrick Mooney

An idea that rippled across the web in 2013, atomic design has changed the way designers and developers think and work. College and university sites are now adopting modular design systems. But what does that mean for the content that goes in them? This presentation for the WP Campus 2020 conference shows how design systems impact the authoring process, points out common pain points for migrating existing content, and gives practical advice to prepare stakeholders for making the shift from WYSIWYGs to structured component libraries.

Creating Content in a Pattern Library

Rachel DeLauder

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. KO provides a complementary, high-level way to link a data model to a UI.

Knockout js (Dennis Haney)

JavaScript Meetup HCMC

Gettings started with Web development

Ujjwal Ojha

Wade.Go Introduction Speech - SFD HCMC 2014

Nguyễn Thành Hải

BWPM Apr2012: Intro Slides

Boston WordPress

Activity 5

John Vincent Caño

Tf byows

Shannon Gallagher

Not everything needs to be deployed as an app. Sometimes a static site generator is the right option. Full transcript/blog post: http://weblog.200ok.com.au/2013/11/static-is-not-dirty-word.html Photo sources: http://www.flickr.com/photos/nuitei/73859782/ http://www.flickr.com/photos/squirmelia/7094409713/ Short talk given at Sydjs, as part of an evening based on topics linked in Axel Rauschmayer's JS Weekly.

Sydjs: static site generators

Ben Buchanan

It4k12 wordpress

School District 60: Peace River North

portfolio website

ALLA CHANDRA KIRAN

UVA MDST 3703 JavaScript (ii) 2012-10-04

Rafael Alvarado

Web Development basics with WordPress

Rashna Maharjan

Introduction to HTML5 & CSS3

g4gauravagarwal

Tf byow

Shannon Gallagher

Tf byow

Shannon Gallagher

Some folks are saying eZ Platform will be even more Open Source than eZ Publish was. This starts with sharing and collaborating all together on the development of it. Let’s deep dive all together in the backlog of eZ Platform and see how, upfront coding, we can work together on this backlog definition to build a kick ass eZ Platform for all the ecosystem. This session will visit the eZ roadmap, an occasion for anyone interested in contributing to discuss it, improve it or even adjust it!

eZ Summer Camp 2014: interactive dive into ez product backlog

Roland Benedetti

Web components, so close!

Aleks Zinevych

Speaker truong the hong drupal

AiTi Education

Why Node, Express and Postgres - presented 23 Feb 15, Talkjs, Microsoft Audit...

Calvin Tan

Was ist angesagt? (20)

Introduction to Web Design for Literary Theorists I: Introduction to HTML (v....

Creating Content in a Pattern Library

Knockout js (Dennis Haney)

Gettings started with Web development

Wade.Go Introduction Speech - SFD HCMC 2014

BWPM Apr2012: Intro Slides

Activity 5

Tf byows

Sydjs: static site generators

It4k12 wordpress

portfolio website

UVA MDST 3703 JavaScript (ii) 2012-10-04

Web Development basics with WordPress

Introduction to HTML5 & CSS3

Tf byow

eZ Summer Camp 2014: interactive dive into ez product backlog

Web components, so close!

Speaker truong the hong drupal

Why Node, Express and Postgres - presented 23 Feb 15, Talkjs, Microsoft Audit...

Ähnlich wie Parcel – your next web application bundler? by Janis Koselevs at FrontCon 2019

Drupalcamp performance

Frontkom

Intro javascript build a scraper (3:22)

Thinkful

Start with Bolt and Go Ez - eZ Publish Summer Camp 2015

Exove

HTML, CSS & Javascript Architecture (extended version) - Jan Kraus

Women in Technology Poland

Designing large custom websites can be a daunting task, but prototyping can help reduce the risk of costly rework by allowing testing and stakeholder feedback cycles to happen earlier and more often. This session will demonstrate how Kalastatic, a flexible open-source framework for building static prototypes and living style guides that integrates with Drupal, can improve the end product and speed up the front-end development.

Prototype to Drupal Site with KalaStatic

cspin

Services, tools & practices for a software house

Paris Apostolopoulos

Front end frameworks

Madushan Sandaruwan

Have you ever wanted to work on a web browser? Servo is an experimental web engine written in Rust. Its small code base and friendly community mean that it is an ideal project for those looking to dip their toes into the world of web browser engineering. In this, Martin Robinson covers the basics of building and running Servo on your own computer. In addition, we'll take a tour of Servo's main subsystems and see what kind of work goes into building them. Additionally, we'll cover a variety of types of contributions to Servo, adapted to different kinds of experience and specialization. By the end you should have the tools you need to explore contributing yourself. (c) GOSIM Workshop 2023 Sept 23-24 Grand Hyatt, Pudong, Shanghai https://workshop2023.gosim.org/ https://www.bilibili.com/video/BV1Hw411r7Q6/

You Can Work on the Web Patform! (GOSIM 2023)

Igalia

Project folder-structure-

Daniel Downs

"Crafting a Third-Party Banking Library with Web Components and React", Germa...

Fwdays

W prezentacji znajdziesz omówienie: -organizację kodu i pracy w trochę większych projektach -wykorzystanie narzędzi takich jak npm, gulp, sass, bower do automatyzacji zadań -efektywną pracę w zespole z wykorzystaniem gita -zasady tworzenia zwartego, łatwego w utrzymaniu kodu w oparciu o podejście SMACSS i BEM -wzorce i podejście do tworzenia modularnego javascriptu -przydatne narzędzia i biblioteki wraz z ich praktycznym zastosowaniem -testowanie stron i aplikacji -przyjrzymy się też nowej wersji Javascript: ES6/ES2015

Architektura html, css i javascript - Jan Kraus

Women in Technology Poland

W dzisiejszych czasach praca z chmurą pozwala niesamowicie zmniejszyć koszta wejścia na rynek z rozwiązaniami typu PoC i MVP oraz w późniejszych etapach rozwoju produktów skalować oprogramowanie według potrzeb. Niestety nie jest to złoty środekt i rozwiązując stare problemy, tworzy nowe. Dlatego, oprócz zapoznania się z technologią serverless, czy Infrastructure as a Code, spróbujemy przede wszystkim stworzyć bezpieczne środowisko, pozwalające na Continuous Deployment.

[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze

Future Processing

Development teams rarely consist of just one developer. Contractors work externally and infrastructure can be split across multiple sites, developers have different skill-sets / remits / requirements and sometimes we collaborate with external parties. This can quickly turn into a “spiders web” of dependencies. Here I address how to develop with Umbraco when working in a large / distributed team, looking at strategies that we can employ to provide for a productive development process.

Umbraco development across large and distributed teams

Janusz Stabik

Snowflake Automated Deployments / CI/CD Pipelines

Drew Hansen

Design for developers (april 25, 2017)

Thinkful

Plomino plone conf2010

ebrehault

Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR

Gaurav Mishra

0506-django-web-framework-for-python.pdf

radhianiedjan1

Implementing a Symfony Based CMS in a Publishing Company

Marcos Labad

Organizing JavaScript

mcordingley

Ähnlich wie Parcel – your next web application bundler? by Janis Koselevs at FrontCon 2019 (20)

Drupalcamp performance

Intro javascript build a scraper (3:22)

Start with Bolt and Go Ez - eZ Publish Summer Camp 2015

HTML, CSS & Javascript Architecture (extended version) - Jan Kraus

Prototype to Drupal Site with KalaStatic

Services, tools & practices for a software house

Front end frameworks

You Can Work on the Web Patform! (GOSIM 2023)

Project folder-structure-

"Crafting a Third-Party Banking Library with Web Components and React", Germa...

Architektura html, css i javascript - Jan Kraus

[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze

Umbraco development across large and distributed teams

Snowflake Automated Deployments / CI/CD Pipelines

Design for developers (april 25, 2017)

Plomino plone conf2010

Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR

0506-django-web-framework-for-python.pdf

Implementing a Symfony Based CMS in a Publishing Company

Organizing JavaScript

Mehr von DevClub_lv

Fine-tuning Large Language Models by Dmitry Balabka

DevClub_lv

It is a talk regarding how AWS is utilized to manage around 200 services, 4+ million users and 20+ teams in Posti Group. The speaker will demonstrate how Posti is maintaining and controlling the ‘Infrastructure side’ of a variety of different cross-functional teams, with a unified approach. The presentation will focus on the approach, tools and tech with some concrete examples. It should be fairly comprehendible even for non-hands on IT professionals, however aimed at Software engineers, Infra and DevOps engineers and IT leaders.

"Infrastructure and AWS at Scale: The story of Posti" by Goran Gjorgievski @ ...

DevClub_lv

Erik Kaju from Wise will give a talk “From 50 to 500 product engineers – data-driven approach to building impactful and efficient product teams”. Product engineering is data-driven. It is best to avoid personal opinions and back actions with data. Sharing data transparently and making it broadly accessible within the whole company helps to scale and build faster. Data-driven practices are useful beyond just product development. Over the years, we have been systematic and methodological in how we scale the company and track its health. This is a story of Wise growing from a regular-sized with 50 engineers to one with 500. While our headcount has grown tenfold, the speed of our releasing and ability to deliver complex projects has risen significantly. It is crucial for the scale-up to not slow down. And that is only possible with effective and unhampered teams. Join Erik for fresh insights that will inspire you to grow your teams, track their health and experiment with team metrics. (Language – English) Erik is Director of Engineering at Wise.

From 50 to 500 product engineers – data-driven approach to building impactful...

DevClub_lv

Why is it so complex to accept a payment? by Dmitry Buzdin from A-Heads Consu...

DevClub_lv

Jurijs Čudnovskis from “Craftsmans Passion” will give a talk “Do we need DDD?“. While helping to build and scale multiple IT companies and during tons of interviews I’ve seen a lot of misunderstanding of Domain Driven Design. I would like to share with you my experience based point of view on why and how DDD can help you and your company to build better, more flexible and scalable software and solve real business needs. The talk will be not so much about technical aspect of DDD, but about core ideas behind with some real world examples. :) (Language – English) For more than 10 years Jurijs is helping multiple organizations to build their products and grow their companies. His passion is to find easiest solution for complex business problems and build excelent business oriented IT teams.

Do we need DDD? by Jurijs Čudnovskis from “Craftsmans Passion” at Fintech foc...

DevClub_lv

Erwin Staal from 4DotNet will share experience on “Network security with Azure PaaS services“. He will share some of the things he learned while implementing network security at his current client. We will start with a short introduction to the basics of networking in Azure. He will present to you some best practices and tell you about some of the limitations you need to know before getting started. We will talk about how you for example can lock-down your API or SQL-server. To do that we will use relatively new Azure offerings like Service endpoints, Private endpoints, and VPN connections. Erwin is a .NET Software Engineer and DevOps Consultant at 4DotNet. He’s helping clients with ASP.NET Core, Docker and Kubernetes and as a DevOps Consultant he helps companies with the implementation of DevOps and Continuous Delivery.

Network security with Azure PaaS services by Erwin Staal from 4DotNet at Azur...

DevClub_lv

Jan de Vries from 4DotNet will share experience on “Using Azure Managed Identities for your App Services“. He will show you what needs to be set up in your application and AAD to get you started. When everything is set up correctly you can manage the access to all of your API’s via Azure Active Directory and even restrict access to specific endpoints if you want. You’ll leave this session knowing how to set up your services by using the built-in capabilities of Azure and make your complete environment more secure and easy to manage. Jan is a Cloud Solution Architect at 4DotNet (Netherlands). His main focus is on developing highly performant and scalable solutions using the awesome services provided by the Microsoft Azure platform. Because of his expertise, he has been able to help out multiple customers to bring their on-premise solution to the cloud and guide them towards a better software development ecosystem.

Using Azure Managed Identities for your App Services by Jan de Vries from 4Do...

DevClub_lv

SRE (service reliability engineer) on big DevOps platform running on the clou...

DevClub_lv

In this talk, we will discuss what is IOT, what is the market and growth of IOT, security in IOT, and factor for the growth of IOT, how the invention of eSIM giving a boost in IOT, and need of cloud and steps for the codification of IOT with Azure. (Language – English) Narendra is a Technical Architect at Cognizant, other than coding his hobbies includes Travelling, reading technical books & watching thriller/sci-fi series.

Emergence of IOT & Cloud – Azure by Narendra Sharma at Cloud focused 76th Dev...

DevClub_lv

Maintaining multiple code bases for the same application is often a pain in the neck for mobile developers. In the recent years, different frameworks have appeared in the market that aim to reduce the workload of developers by offering them a write-once-run-everywhere approach. In this session, Wei-Meng will take a quick look at the different frameworks available – Xamarin, React Native, and Flutter. He will focus on using Flutter and see how it makes your life as a mobile developer easier. (Language – English) Wei-Meng Lee is a technologist and founder of Developer Learning Solutions (http://www.learn2develop.net).

Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile foc...

DevClub_lv

Change is inevitable. So is legacy. And too often, we as developers (who love to solve problems by coding) fall into the trap of believing the only way to fix it is by rewriting everything again and again. But how can we design an application architecture that is more resilient to change in the first place? How can we defend against entropy in a system where people are pushing changes every day? In this talk we’ll define what architecture means for the frontend, dispel some commonly-held myths, and look at specific tools and techniques on a scale from micro to macro that you can use today to keep your app from turning into that infamous ball of mud.

Building resilient frontend architecture by Monica Lent at FrontCon 2019

DevClub_lv

JavaScript can be a passive-aggressive and fickle language that can frustrate you at every turn. It lets you do things like declare variables anywhere, but doesn’t tell you that it will hoist them while you’re not looking. Learn how JavaScript organizes data by using key-based dictionaries and how it handles functions behind the scenes. Additionally, you'll learn how JavaScript uses arrow functions, closures, prototypes and inheritance, equality, and more. In this session, you'll learn little known facts about JavaScript, as well as frequently experienced JavaScript headaches and mistakes, and ways to avoid them. Learn these key facets of JavaScript and take your knowledge to the next level!

Things that every JavaScript developer should know by Rachel Appel at FrontCo...

DevClub_lv

Front-end developers have grown accustomed to protecting themselves from attackers seeking to exploit vectors such as cross-site scripting and malicious input, but the prevalence of reusable micro-libraries in the Node.js ecosystem makes JavaScript developers particularly susceptible to software supply chain attacks. In this session Mitch will share his perspective on helping to protect Microsoft and its customers from these supply chain attacks and what it is like being the vendor of an artifact management service which often plays the middleman between target and victim. Learn how Microsoft tackles the problem of securely taking dependencies on open source software and what problems scanning tools can and can’t solve and thoughts on how we as an industry could start to tackle the problem for 0-day malicious packages.

In the Trenches During a Software Supply Chain Attack by Mitch Denny at Front...

DevClub_lv

Software Decision Making in Terms of Uncertainty by Ziv Levy at FrontCon 2019

DevClub_lv

V8 is complicated. Things change way too fast and it’s really hard to keep track of what’s the fastest way of doing every specific action. But not anymore. Join me, a V8 contributor, on a journey through the compilation pipeline of V8 and understand how it all works under the hood. We’ll take the example of a popular JavaScript builtin method and find that what does and does not trigger de-optimization. By the end of the talk, you will have a fairly decent idea of how builtins are written inside the V8 compilation pipeline, and how to make sure you always take the fast path, no matter what.

V8 by example: A journey through the compilation pipeline by Ujjwas Sharma at...

DevClub_lv

The main topic of this talk is a short introduction to Storybook.js, JavaScript library that allows us to create independent and interactive UX components from already existing ones, developed in frameworks such as Angular, React or Vue. Reusing the components, we create an isolated environment that can be shared within the organization and enable a collaboration between designers and developers on a whole new level. Different use-cases will be described using Angular as a framework of choice with practical examples.

Bridging the gap between UX and development - A Storybook by Marko Letic at F...

DevClub_lv

This talk will cover the whole UX development process and many choices that we as a team did, to get where we are now. When you think about frontend, it’s not just a developers who writes Javascript. If you want to make it right, you need UX researchers, UX designers, UI designers, Visual Designers, Technical writers and, of course, UX developers. I would like to talk about each roll in short and how they help and why you should have all of them to achieve best results. After that I want to go into more technical details on why EmberJs (its not so trendy, right?). How we work with ES6 and why we see future in Typescript. I will structure a talk in terms of a “technical challenge – pros/cons – why we’ve chose A and not B”. For example: We have 16 applications internal and external. Why we have them separate and not a single app. We had ~8-10 internal packages and we’ve merged them into 2. Why we’ve did that and why benefits out-weighted cons? Also, from the talk point, I want to start with a real Cybersecurity case and how how it gets solved

Case-study: Frontend in Cybersecurity by Ruslan Zavacky by FrontCon 2019

DevClub_lv

Page load times can influence conversion rates and store profitability a lot. PWA is a magic keyword that can deliver fast page load times and happy customers that buy a lot. PWA was coming to Magento, there were several competing solutions, but we wanted to be the best and stand out. Being the most certified Magento agency in the world Scandiweb wanted to make something that is both compatible with default Magneto, but also easier to use and faster. So this is a story of looking at competitors and finding our niche as well as building on experience gained by creating solutions for the world’s top brands. The talk will share approaches investigated and selected and look into tips and tricks used to get out most of React, Webpack, Mobx and other cool frontend tools. There is also some GraphQl and aspects of integration with Magento.

Building next generation PWA e-commerce frontend by Raivis Dejus at FrontCon ...

DevClub_lv

Redux is one of the most popular technologies for the management of shared state across entire React applications, which can be complemented by Redux Observable to describe asynchronous side effects with RxJS. This approach, however, adds cognitive load when balancing the varying concepts across these three libraries. What if we could use RxJS exclusively for managing state in our React apps? This talk will demonstrate this possibility and the benefits it provides.

Managing State in React Apps with RxJS by James Wright at FrontCon 2019

DevClub_lv

AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...

DevClub_lv

Mehr von DevClub_lv (20)