Chris Lorenzo at The Lead Developer New York 2017

Chris Lorenzo at The Lead Developer New York 2017


>>Hi everyone. My name is Chris Lorenzo, I’m a senior principal
engineer with Comcast for those who are from the UK is the largest cable TV and internet
service provider in the US. They have 30 million customers, fortune 50
company. They own NBC universal. We have over 500 Polymer components in production. A little bit more about me. I’ve been married for five years, I’ve been
with Comcast for 10 years and I’ve been in dev for 16 years. And my wife and I have a son and daughter,
theo and Josie, they’re adorable. And I’m from Philadelphia, again from the
people from the UK it’s about an hour and a half train ride from here. Doan drive in because it’s an hour and a half
to get here and an hour and a half to get into New York City and Comcast center on the
left that’s the building I currently work in. The new building is the technology and products
center. It’s currently under construction, that’s
all for technologists and product people so we’re all going to be moving in there when
it’s done at the end of the year and my group works on a lot of different products. The Xfinity portal is a Ruby on Rails site. Next the Xfinity home site is the first Google
this is for home security and automation.>>Our latest Google Polymer site which is
not even out yet is Xfi, this allows customers to manage their internet and set up parental
controls which is really exciting if you have kids. And lastly we have the X1 platform which is
the premiere cable television viewing experience, and it’s the same on all devices, but if you
use our website, that’s also written in Google Polymer. So since this is a lead developer conference
I’m going to talk a little bit about my coding and I wrote down a bunch of languages and
things that I’ve touched in over the course of my life and I like to talk a little bit
about my programming skill and when you first start off as a developer you quickly increase
your skillset but eventually you reach this point where you plateau and you kind of go
flat and you start to ask the bigger questions which is how do I build an app? How do I maintain an app? And that’s especially important for us, as
we have sites in production that will stay out there for multiple years, and sometimes
you wonder, which way should you go, and my son is really good at that, he just says that
way, dad and we go that way. And it’s really hard to make these decisions
and that’s kind of why on the front end we love these frameworks and a lot of these are
very popular because as long as you follow the path that they set up for you you pretty
much always finish with an app and you never ever want to leave the path because that’s
really dangerous and the problem becomes that know one hose how to structure a front end
application. I’ve worked in this industry for years, JQuery,
front-end, backbone? And
we want to increase our still level and when we pick up these libraries and languages,
we really have to figure out what they’re trying to teach us. For me, my skill level picked up when I picked
up Polymer, but other places you could work with Angular, React or you could have learned
something else, I don’t know and the reason on the front end, like all these frameworks
are basically the same. They’re all about building reusable components. In fact, with React the only thing you do
is build components, since they’re so encapsulated. For me, that was really like the lightbulb
moment. Because in computer science there’s all these
really cool technical terms, encapsulation, composition, separation of concerns, decoupling,
functional decomposition, they sound really cool to say whoo, and they’re really just
trying to tell you decouple all the things, you know? And the reason why you want to do that is
because simplicity matters. And rich Hickey gives this talk. Eventually when you start it is small and
then it grows up. It’s like a big elephant when really you want
a software that looks like this, which is built to small blocks, decoupled, you can
easily add new features out or swap features out because they’re all components and that
is why I love Polymer, because Polymer is all about building components. And in fact, they come with a whole bunch
of components out of the box. You can download one of these and use it. When was the last time you wrote a dialogue
box? There’s a paper dialogue element. There’s a component for that, that’s like
their keyword. And you import this one component, put it
on the page and you get a dialogue. And you’re probably wondering, how is that
different than any other components, aren’t they all — I’m glad you asked. Well, first it’s the Polymer project, and
it’s not a framework, it’s a library, just like React, I know. But the Polymer library sprinkles a bit of
sugar over the standard web components API, making it easier for you to get great results
and it’s this web component’s API that separates Polymer from all the other frameworks that
you’ve used before on the web. Web components are low-level primitives that
let you define your own HTML elements. Such as heart-polymer, without a framework. That’s right, Josie, without a framework!
[laughter] And there’s actually four specs in this web
component sphere. And you can use these each individually, custom
elements, templates, HTML imports and Shadow DOM. Custom allows you to name your own tags. Custom elements allows you to do HTML5 imports
is a good way to bundle up your components. And the Shadow DOM gives you true encapsulation
for your components, so you don’t have to worry about in our styles messing up another
component on the page. And Chrome already has all these APIs built
in. If browser doesn’t have it, there’s polyfills
available. Safari just released Shadow DOM with the new
release, and Microsoft Edge it’s the number one voted-for feature and of course they started
implementing service workers first. I don’t know why you even vote for things,
thank you, Microsoft. [laughter]
But the reason that this is important is because you want to eliminate the frameworks and you
want to get closer to the metal and this is extremely important as we’re building these
front ends that have to work really well on mobile browsers. If you’re downloading pa whole framework to
load your site it’s going to be really slow and painful in mobile. And that’s why the Polymer motto is to use
the plat to build a better web. The Polymer team has spent time working with
all the browsers to get these APIs added to the browsers, they spent the last three years
working on the specs, talking to the browser teams, pushing them to implement it and they’re
really trying to work on the platform so we can take the frameworks and make the browser
do it for us. And the best part is you don’t have to use
the Polymer library, you can use web components independent of the Polymer library. And they’re made to be interoperable with
all the other components that exist. So you can create a component that works with
everything. For instance, with all of our sites that I
showed you in the beginning, we have this universal nav and this universal nav, I just
spent the time to rewrite it as a custom element so they just have to load that one script
tag and then they get a tag, xc-header which they can add to the page and that same script
tag also includes a footer component because we have the same universal footer, why wouldn’t
we right? A header and a footer, makes sense and they
get that tag as part of this script, too. So that was the high-level overview of web
deponents p components. If you’re interested in finding out more about
that or Polymer I have lots of other talks on the matter, feel free to check them out. Thank you for your time. [applause]

Related Posts

Spurs fan spotted sewing during clash with Crystal Palace sends Twitter into meltdown

Spurs fan spotted sewing during clash with Crystal Palace sends Twitter into meltdown

TOTTENHAM had the game sewn up early in their 4-0 demolition of Crystal Palace, so much so that fans were

Leave a Reply

Your email address will not be published. Required fields are marked *