Building a starter kit cedg20181010
•Download as PPTX, PDF•
0 likes•29 views
The "Building a Starter Kit" presentation given to the CEDG on 10/10/2018.
Recommended
More Related Content
Similar to Building a starter kit cedg20181010
Similar to Building a starter kit cedg20181010 (20)
Recently uploaded
Recently uploaded (20)
Building a starter kit cedg20181010
- 1. BUILDING A STARTER KIT MODERN WEB APPS WITH ASP.NET AND REACTJS Improved Processes => Improved Bottom Line
- 2. About Me Copyright Walling Info Systems LLC. All rights reserved Joe Walling 30+ years industry experience Walling Info Systems LLC Dump Truck Dispatcher Greenville Spartanburg Developers Guild
- 3. Overview Why build a starter kit What goes into a starter kit Architecting a modern web app Front-end frameworks and tooling Build and startup automation Copyright Walling Info Systems LLC. All rights reserved
- 4. Copyright Walling Info Systems LLC. All rights reserved Don’t reinvent the wheel
- 5. Why build a starter kit Copyright Walling Info Systems LLC. All rights reserved Saves time and money
- 6. Why build a starter kit Copyright Walling Info Systems LLC. All rights reserved Saves time and money Remove common non-functional decisions
- 7. Why build a starter kit Copyright Walling Info Systems LLC. All rights reserved Saves time and money Remove common non-functional decisions Design and development consistency
- 8. Why build a starter kit Copyright Walling Info Systems LLC. All rights reserved Saves time and money Remove common non-functional decisions Design and development consistency Interactive example
- 9. Why build a starter kit Copyright Walling Info Systems LLC. All rights reserved Saves time and money Remove common non-functional decisions Don’t reinvent the wheel Design and development consistency Interactive example Makes collaboration easier and aligns teammates
- 10. Great Software is Copyright Walling Info Systems LLC. All rights reserved Reliable Scalable Extensible Flexible Affordable
- 11. Common Decisions Copyright Walling Info Systems LLC. All rights reserved Asset bundling and minification Transpiling Dynamic HTML Generation Development webserver Linting Database migrations File structure CI
- 12. Common Decisions Copyright Walling Info Systems LLC. All rights reserved Automated build Automated deployment Authentication Authorization Security Logging Package management Package security
- 13. Common Decisions Copyright Walling Info Systems LLC. All rights reserved Error handling Notifications Cache busting Hot module Reloading IDE Source Control Components Dependency Injection
- 14. Common Decisions Copyright Walling Info Systems LLC. All rights reserved Routing Caching Versioning Testing frameworks and tools Server side unit tests Client side unit tests Integration tests UI tests
- 15. Common UI Copyright Walling Info Systems LLC. All rights reserved Login Forgot password Password reset User edit form User list Tenancy list Tenancy detail Etc…
- 16. Copyright Walling Info Systems LLC. All rights reserved Do you consider all of those items for each application?
- 17. Copyright Walling Info Systems LLC. All rights reserved YAGNI => ININ
- 18. Copyright Walling Info Systems LLC. All rights reserved Are you sold?
- 19. Before starting Copyright Walling Info Systems LLC. All rights reserved Understand your use cases Type of software Level of developers Technological competence
- 20. Assumptions Copyright Walling Info Systems LLC. All rights reserved Developer is comfortable with ASP.NET app dev Application is medium to high complexity Scales well Includes testing of front and back end Dynamic, responsive UI
- 21. High Level Architecture Copyright Walling Info Systems LLC. All rights reserved
- 22. IDE Copyright Walling Info Systems LLC. All rights reserved Visual Studio VS Code WebStorm Sublime Atom
- 23. And components Choosing JavaScript Libraries Copyright Walling Info Systems LLC. All rights reserved
- 24. Package Manager Copyright Walling Info Systems LLC. All rights reserved
- 25. Why Yarn Copyright Walling Info Systems LLC. All rights reserved Fast Deterministic Resilient Backed by FB and Google Uses NPM repository
- 26. Why React.js Copyright Walling Info Systems LLC. All rights reserved Flexibility Performance Components Developer experience Corporate investment Testability Community support High developer demand compared to supply React Native
- 27. Package Security Checker Copyright Walling Info Systems LLC. All rights reserved Node Security Platform Retire.js Snyk Various paid options
- 28. Module Formats Copyright Walling Info Systems LLC. All rights reserved IIFE Asynchronous Module Definition (AMD) CommonJS (CJS) Universal Module Definition (UMD) ES6 Modules
- 29. Why ES6 Modules? Copyright Walling Info Systems LLC. All rights reserved Standardized Statically analyzable Improved autocomplete Fails fast Tree shaking Easy to read
- 30. Module Bundling Copyright Walling Info Systems LLC. All rights reserved
- 31. Why use Webpack Copyright Walling Info Systems LLC. All rights reserved Bundles more than JS Import CSS, images, etc… Built in hot module reloading dev server Supports tree shaking (V2+) Bundle splitting
- 32. Development Webserver Copyright Walling Info Systems LLC. All rights reserved http-server Express BrowserSync Webpack
- 33. Transpiler Copyright Walling Info Systems LLC. All rights reserved What it is? Why needed? Options When run
- 34. Linting Copyright Walling Info Systems LLC. All rights reserved Enforce consistency Avoid mistakes
- 35. Linting Choice Copyright Walling Info Systems LLC. All rights reserved ESLint since we are using ES2015+ Decisions to make Config format External rules Internal rules Plugins
- 36. Other Useful Packages Copyright Walling Info Systems LLC. All rights reserved Postcss Autoprefixer Style-loader Css-loader Chalk Dot-env Jest Extract-text-webpack-plugin
- 37. UI Components Copyright Walling Info Systems LLC. All rights reserved List of UI Components Prime React
- 38. React Advantage Tech Stack Copyright Walling Info Systems LLC. All rights reserved React Apollo GraphQL ASP.NET MVC Core 2.1 API EF Core 2.1 SQL Server
- 39. GraphQL Copyright Walling Info Systems LLC. All rights reserved Query based Ask for exactly what you want Facebook created
- 40. Example Copyright Walling Info Systems LLC. All rights reserved
- 41. GraphQL Advanages Copyright Walling Info Systems LLC. All rights reserved Uses less bandwidth Typed schema Discoverable Versioning Supports rapid iterations
- 42. Disadvantages Copyright Walling Info Systems LLC. All rights reserved Complexity Caching Young technology
- 43. Example using Apollo Client Copyright Walling Info Systems LLC. All rights reserved
- 44. Copyright Walling Info Systems LLC. All rights reserved I’m looking for help Github.com/joewalling/reactadvantag e
- 45. Contact Info Copyright Walling Info Systems LLC. All rights reserved Email: jwalling@wallingis.com Twitter: @joewalling Github: https://github.com/joewalling
Editor's Notes
- When you start a new application, are you starting from scratch? Or maybe you aren’t starting completely from scratch but are using one of the built in templates in Visual Studio. One reason Angular is so popular is that they have put together a framework that keeps you from having to think about certain aspects of your project when you start a new project. However, if you are like me and don’t buy into some of Google’s choices with Angular, you have to look for other options.
- While some developers could care less about this, you can bet that the people focusing on the bottom line of the business appreciate this. You can bet that your bosses will appreciate this.
- Wouldn’t it be great to be able to focus on the part of the application that makes your application unique and valuable instead of worrying about the plumbing and common components?
- Does the cancel button go to the left or the right of the OK button? Where does the save button go? What font do we use and what should be the default size? Which select control should we use…the standard HTML select, a bootstrap select 2…. How many of you are sure that every page on your web application is consistent as far as these items? Do any of you have to support the applications you write? Would it be safe to assume that answering these calls is not the highlight of your day? This consistency makes it easier for users to work with your application, resulting in fewer support calls.
- How are new developers supposed to get up to speed on your standard components and way of doing things. A good starter kit include lots of interactive examples and guidance.
- When you have an agreed upon guideline for development and a starter kit that implements the guidance, everyone on the team knows what to expect. They know where to look for files and where to put them. You develop a common language, so when a spec says, “Using our standard list view with filters, sorting, and pagination, everyone knows what that means and the spec doesn’t have to spell out in detail how to accomplish this.
- If you have to start from scratch each time, can you meet all 5 of these requirements?
- How often do you tell yourself later that you wish you had the time to add XXX functionality to the application, but I don’t have time to do it right now. Then you go on and do the same time sucking action over again manually because you didn’t plan for it in advance.
- How often does YAGNI turned into I need it now and you are under the gun to deliver this thing that should have been included from the start. For example, most developers I know tend to ignore logging until they have a problem. How often do you release an app and have 0 issues? How often do you wish you had logging built in when you released the app?
- Hopefully, by now you see the need for having a starter kit for developing new software. Raise your hand if you think a starter kit would be useful in your development group? If you didn’t raise your hand, why do you not think a starter kit would be good for you?
- If you are developing internal apps for developers, the fit and finish of the applications doesn’t need to be at the same level as commercial applications for the general public. The type of decisions I mentioned earlier are hard to make if you are a novice developer. Heck, many of those are hard for a seasoned vet to decide on. Determine if your shop has the capability and budget to create a starter kit from scratch? You don’t need to start from scratch if you can find a starter kit that will fit your needs.
- These are the assumptions I have made and will not necessarily be the same ones that are best for your type of development. Note that I am not creating a framework meant to create a simple crud application for a developer looking for a quick way to get data entered into the db. The framework I am working on is designed for SaaS applications that need to be reliable and scale well.
- In this case, I’m not getting into the detail regarding using MVC on the Server side. This is just big picture to show how the front end communicates with the backend via the service…or in this case webservice. The service layer sits between the presentation layer and the business logic. It should be a thin layer with the purpose of getting the data in the right format for the presentation layer to use. It delegates its work to business objects.
- You may need to have some logic client side to improve UI responsiveness. In some cases like validation, you may need to do it in both locations as the data from client can’t ever be trusted.
- In the following slides, I am going to walk through some of the decisions I had to make in choosing JS libraries and why I made them.
- I have seen benchmarks showing that it is 2 to 3 times faster than NPM. The same results will be yielded every time yarn is run in a repository Offline mode - if previously installed, you don't need an Internet connection to install again. Fully compatible with major Javascript frameworks Network Resilience - a single failure won't stop an installation Backed by FB and Google Good network performance Resolve mismatching versions of dependencies to a single version to avoid creating duplicates. Can tell you why a package was installed License checker so you can see the license each package being installed uses NPM 5 improved performance a little, added a lockfile for deterministic installs, and by default do –save. However, the performance still lags yarn considerably.
- Flexibility – it is a view library and not a framework, so it is not as opinionated as frameworks like Angular and Ember Performance Components - reusable Developer experience – fast learning curve since it is a small api Corporate investment Testability – fast since they can run in memory. Jest is built in as part of Create-react-app. Community support High demand compared to supply React native to write once and run anywhere…where have we heard that before?
- Hackers are always finding new ways to exploit popular open source libraries, so it is important that you run security checks on your packages.
- IIFE = immediately invoked functional expression
- Transpilers are source to source convertors Why needed? Needed to convert ES2015+ to ES5 to support older browsers Tomorrows JavaScript today Allow you to work in an environment more friendly to the way you want to work and still get the desired result. Options Typescript Babel When run Every time the js file is saved
- Why Enforce consistancy Curly brace position Globals Trailing commas Avoid mistakes Extra parentheses Assignment in conditional Overwriting function
- Use ESLint since we are using ES2015+ Decisions Which config format Which external rules Which internal rules Which plugins eslint-plugin-react When run Every time js file is saved
- These are already part of create-react-app so you don’t have to figure out how to set their config files to get them working correctly. PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors. It ends vendor specific prefixes so you don’t have to remember them in creating your css. style-loader is a Webpack loader that can load some CSS and inject it into the document via a <link> tag. css-loader is the loader that can parse a CSS file and apply various transforms to it. Chalk for terminal string styles Extract-text-webpack-plugin It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bund
- While I spent a lot of time going over the JavaScript libraries, I didn’t spend time on the rest of the stack.
- GraphQL is essentially RPC, with a lot of good ideas from the REST/HTTP community tacked in. It is one of the fastest growing API ecosystems out there It is a standard that allows the client application to use a query to request exactly the desired data. You ask for specific resources and specific fields, and it will return that data in the response. You can also create mutations to add or update data and you can create subscriptions so that when data changes or specific events happen the subscribers are notified. It allows the front-end developer, to write queries that have the exact data shape they want. In addition to allowing fewer data elements to be returned in a query, it also reduces the number of HTTP requests necessary to retrieve data for multiple resources. With REST APIs, you may get a list of customers in one call and then have to make individual calls for each customer to get their orders. All of these individual calls are much slower than the single call that can be made with GraphQL.
- Left side shows the GraphQL query and the right side shows the json response
- The lower bandwidth is very important to mobile devices Only return the desired data elements instead of all of them. No over or under fetching data. Underfetching => n+1 issue It can batch queries so that it is returned in one package rather than having to make multiple queries to the server. Talk about a blog: Post, author info, comments With the variety of different mobile and web devices, you may have different data being returned to different devices. You can add data elements to the schema on the server without having to worry about versioning. When new elements are added, old clients will still work since they aren’t using these. Removing items is a different matter. A common pattern with REST APIs is to structure the endpoints according to the views that you have inside your app. This is handy since it allows for the client to get all required information for a particular view by simply accessing the corresponding endpoint. The major drawback of this approach is that it doesn’t allow for rapid iterations on the frontend. With every change that is made to the UI, there is a high risk that there will be more (or less) data required than before. This results in the backend having to be adjusted to account for the new data needs. This approach requires both front and backend development. When using GraphQL, if the database already includes the desired information, all of the changes can be made on the client.
- By using the Apollo client, you can overcome some of the complexity and get caching included.
- Does anyone else have a starter kit or template that they think would be useful to others?