NativeScript Developer Day[s] 2017 — Day 2
This is Part 2 for the notes I took while attending NativeScript Developer Days in NYC.
Here is Part 1.
Optimizing Startup Time — Tuesday, September 19th, 2017
Stanimira Vlaeva kicks off the second day with…
✨C O D E ~ O P T I M I Z A T I O N ✨
Nothing in this world brings me more joy than code optimization.
(Everyone else feels the same way, right?)
Earlier in the conference, the team boasted, “NativeScript apps can load-on-startup in as little as 3.2 seconds.” Now, we get to put that assertion to the test.
Apparently, the framework ships out with an amazing tool called the timeline view. It profiles your startup time, then maps the results. Visually.
Even better, it’s just a package.json update away.
So, Stanimira starts us off with a demo for a “typical” Android app. As is, it takes a whopping 12.7 seconds to load.
That’s Pokemon Go-levels of infuriating.
The timeline view presents each phase of the startup as a series of stacking valleys. These phases include…
- Setting up the V8 engine
- Extracting the app
- Loading the JS modules — (no surprise, this is simply the worst)
- Performing background Android activity
- Executing the Java garbage collector
- Generating the UI interface
Now, Let’s take back some of our life, shall we?
We go through a number of steps in turn:
- Setting up Lazy Loading (reduction: 2s)
- Bundling and chunking your modules with Webpack (reduction: ~1s)
- Configuring Angular’s Ahead-of-Time compilation (reduction: 5.6s)!!!
- Uglifying and tree shaking (reduction: 0.5s)
- Utilizing V8 heap snapshots (reduction: 0.7s)
- Improving angular/animations gets imported (reduction: 0.7s)
We’re now under 3 seconds. Now that’s what I call nice.
Obsessed with performance? You’ve got quite a lot to chew on here.
At the end, the speaker claims we can go even further. She leaves it to us to discover this “secret” ourselves.
I couldn’t help but call to mind our patron saint of “Going Beyond”…
However, I’ll have to leave the PLUS ULTRA to other people for now.
Some final notes:
Mastering NativeScript layouts
Brad Martin brings us over to the design side with a conversation about layouts.
He’s all about that layout hype…
When determining your perfect layout, here are two questions to ask yourself:
- How does the content flow?
- Does any of your content span?
Why do we even care about selecting the right layout in the first place? Because as Brad goes on to show us, a bad one can hit your performance.
He follows up with some advice:
- Flatten your layouts — avoid nesting as much as possible
- The Grid Layout option is perfect for this
- Expand your layouts — take advantage of the infinite canvas
For the latter point, he encourages us to “Go beyond [the screen boundaries].”
Be mindful, however, for the time spent on drawing elements off-screen.
Fall in love in Native APIs
Using Native APIs are “much easier than you’d think”
Robert Laverty reminds us that it’s not just about Javascript: both the iOS and Android platforms maintain their own features as well. Native APIs are
- Open source
- Flexible
- Easy to use
He also tells us about a plugin called tns-platform-declarations, which provide type definitions for each of them.
All-in-all, the ability to leverage what makes a platform great is one of the key benefits for a native, cross-platform framework.
The Power of RxJS
RxJS is “Angular 2’s only external dependency”
It’s Tracy Lee! Her excitement is infectious.
Listening to her be happy about reactive extensions makes me happy about learning about reactive-extensions.
With RxJS, we get:
- A push-based primitive for Javascript
- A domain-specific language that sits on top of Javascript
- Complex interactions that are easy to chain together
She explains the concept of Observers and Observables.
She tells us about her difficulty with grappling the RxJS library.
Then, she builds us an app for puns!
It’s all about this.puns.getPuns().
(I know a few people who’d get a kick out of this app).
It also includes a vision API and speech recognition! Because, why not?
A great talk all-round.
“SwitchMap all of the things!”
A musical interlude
Videos of Tracy singing phone karaoke with other devs.
Conferences should have more of this.
Native to Hybrid and Back Again
Nic Raboy tells us about his journey through the years with mobile technology.
He talks about his successes with building on Java for Android, and how long it took him during that time (6 months) to build each app.
He talks about switching to Ionic, and about how much faster it was for him to deploy to market (from 6 months to 2 weeks).
However, he soon learned the major downside to Ionic, which, as we all know, is its terrible performance.
Finally, he discovers NativeScript, a framework that provides him:
- Performance
- Stability
- Compatibility with Angular
- Support for Android & iOS
… all while still remaining quick to deploy to market.
Performance from the Trenches
More about code optimization, this time from Nathaneal Anderson.
We start off with a litany of Javascript’s performance issues:
- Javascript defaults to the main thread — which NativeScript does as well
- Android does not like nested layouts —therefore, don’t nest: use Grid Layouts
- Functions and objects declared in loops cause additional memory allocation— Author’s note: “closure” ain’t just a trivia word here, folks! Each additional closure causes additional lexical overhead
- Certain keywords automatically push your context off the compiler:
debugger,eval,with - Polymorphic functions and object modification also push your code off the compiler
Interesting fact: You can access and test these V8 compiler optimizations directly using the v8-natives library on npm.
A plethora of knowledge here. Some I knew, some I didn’t. All interesting and useful.
Mobile UI Test Automation
Svetoslav Tsenov and Vasil Chimev walks us through a live demo that uses nativescript-dev-appium, an E2E testing framework.
Fun times!
The Art of Mobile App Interaction
“We’re too focused on actions, not interactions”
Now that our apps are optimized, it’s time to set the house on fire with some cool UX!
Alex Ziskind emphasizes to us the importance of good design:
- It’s easy to make excuses
- All objects in the real-world “ease” into view — therefore, your transitions should do the same
- Good design is worth paying a good designer for
- All design must serve a purpose
He walks us through various demos showing easing, offsetting, parenting, masking, and zooming.
It definitely goes to show how “minor” decisions like this can really impact the user’s experience.
Chrome DevTools
For the final presentation of the day, Peter Kanev demos, step-by-step, what debugging an app through Chrome DevTools would look like.
It’s a neat feature for NativeScript. You can use your web browser to debug a native mobile app? Yeah, that’s cool.
It does look a little painful, though.
Perhaps I’m just spoiled, but among the offerings by Firefox DevTools, React DevTools, and Redux DevTools, debugging for the web has been smooth as ice so far.
Hopefully, we’ll reach that point soon for mobile as well!
The End
Whelp, that’s the end of my notes.
All-in-all, I’m quite happy to have come to New York to experience this.
Before this week, NativeScript had been nothing more than a blip on my radar. I knew nothing about the framework, and certainly not about the company behind it, Progress.
Now, I’ve got a notebook full of items to check out, and a whole lot of hype to burn through.
I’ll try to blog about my experience using the technology as well :)
Thank you for reading everybody, and thanks to the NativeScript Team for putting this conference together!
